iOS forza angoli arrotondati e abbagliamento sugli input

94

I dispositivi iOS aggiungono molti stili fastidiosi agli input del modulo, in particolare all'input [type = submit]. Di seguito è mostrato lo stesso semplice modulo di ricerca su un browser desktop e su un iPad.

Desktop:

Desktop

iPad:

iPad

L'input [type = text] usa un riquadro shadow box CSS e ho anche specificato -webkit-border-radius: nessuno; che apparentemente viene sovrascritto. Il colore e la forma del mio pulsante di input [type = submit] vengono completamente imbastarditi sull'iPad. Qualcuno sa cosa posso fare per risolvere questo problema? Grazie in anticipo.

css ios forms

— inorganik
fonte

4

-aspetto-webkit: nessuno; Aiuta ad eliminare la maggior parte dei problemi, ma ancora non elimina lo spazio tra i due elementi o gli angoli arrotondati. Quindi qualsiasi aiuto in merito sarebbe apprezzato. Grazie.

— inorganik

2

Hai specificato -webkit-border-radius:none;hai specificato border-radius:none;?

— Rigel Glen

7

Specificare -webkit-appearance:nonee ha -webkit-border-radius:0fatto il trucco su iOS per me!

— Primus202

183

La versione che avevo funzionante è:

input {
    -webkit-appearance: none;
}

In alcune versioni del browser webkit, potresti anche trovarti di fronte a ciò che è border-radiusancora in atto. Ripristina con quanto segue:

input {
    -webkit-border-radius:0; 
    border-radius:0;
}

Questo può essere estesa ai tutti webkit designato formcomponenti come input, select, buttono textarea.

In riferimento alla domanda originale, non useresti il valore "nessuno" quando cancelli un elemento CSS basato sull'unità. Tieni inoltre presente che questo nasconde le caselle di controllo in Chrome, quindi forse usa qualcosa come input[type=text]o input[type=submit], input[type=text](nota che input:not([type=checkbox]), input:not([type=radio])si applicherà a tutti i tipi di input, poiché ogni input soddisfa una di queste due condizioni).

— marksyzm
fonte

5

-aspetto-webkit: nessuno; Nasconde le caselle di controllo in Chrome: non è una soluzione valida!

— Nico Westerdale

2

-aspetto-webkit: nessuno; fa il trucco! (-webkit-border-radius non necessario)

— OZZIE

Buon punto: dipende dalla versione del browser, ho trovato, quindi è lì solo per un fail-safe. Modificherò il post per rilevanza.

— marksyzm

3

input: not ([type = "checkbox"]) sarebbe un modo migliore per evitare il problema in Chrome? Anche se non funzionerebbe in IE <= 8, ma poi di nuovo, non è quello che stai cercando di risolvere.

— Robin French,

Usare input:not([type=checkbox]), input:not([type=radio])significa che lo stile si applica a tutti i pulsanti su Safari, poiché ogni pulsante soddisfa una di queste due condizioni. Invece, ho usato input[type=submit], input[type=text].

— miguelmorin

17

Puoi sbarazzarti di altri moduli, input, ecc. Di webkit con questo:

input, textarea, select {
   -webkit-appearance: none;
}

— nick
fonte

Dovrebbe comunque essere border-radius: 0;ripristinato completamente e non voglio un raggio di confine. Altrimenti basta impostare il border-radius.

— Refilon

3

Per il pulsante di invio non utilizzare:

<input type="submit" class="yourstylehere" value="submit" />

Utilizza invece il tag del pulsante:

<button type="submit" class="yourstylehere">Submit</button>

Questo ha funzionato per me.

— Gorilla robot digitale
fonte

1

FWIW, ho appena riscontrato questo problema su un progetto e anche l'iPad 1 su cui stavo testando ha aggiunto stili ai <button>tag. Quindi penso che sia meglio risolverlo direttamente con i CSS.

— neemzy

1

dai un'occhiata a normalize.css

C'è una demo in cui puoi testare gli elementi del modulo e vedere come appaiono in ios. Ci sono più proprietà orientate al webkit.

— Rdpi
fonte

1

Questo è ciò che utilizzo nei miei progetti

* { 
    -webkit-tap-highlight-color: transparent; 
}
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span {
    -moz-user-select: none; 
    -webkit-user-select: none; 
}
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}

— Waqar Alamgir
fonte

0

Questo problema si verifica anche in alcuni browser se si dispone di quanto segue:

<a class="btn btn-primary" href="#" type="button">Link</a>

invece di:

<a class="btn btn-primary" href="#" role="button">Link</a>

Questo può accadere se cambi l'elemento di input per un elemento anker e dimentichi di passare typea role.

Ho avuto questo problema sia su Chrome che su Safari sul mio iPad.

— Dirk
fonte