Rendering strano pulsante invio CSS su iPad / iPhone

222

Ho notato che se modifico i miei pulsanti con CSS usando raggio, colori e bordi, sembrano buoni ma in iphone / ipad / ipod sembrano terribili ... non dovrebbero avere lo stesso rendering di Safari Desktop ??

inserisci qui la descrizione dell'immagine

— Francesco
fonte

possibile duplicato di stile CSS per pulsanti di input su ipad / iphone

— skolima

Risposte:

453

oops! mi sono appena trovato: aggiungi questa riga su qualsiasi elemento di cui hai bisogno

   -webkit-appearance: none;

— Francesco
fonte

ti amo, StackOverflow, e @Francesco

— jahrichie

Fantastico, e qui è un grande articolo a riguardo trucchi CSS. Elenca tutti gli altri elementi modificati da WebKit e Mozilla.

— Patrick,

Compass ha un mixin anche per compass-style.org/reference/compass/css3/appearance

— Patrick Beeson

Vorrei che avrei fatto questa ricerca su Google 12 ore fa ... GRAZIE.

— Elly Post,

Davvero fantastico! non ho pensato che questo tipo di problema si sia verificato anche in iOS! Ancora una volta grazie mille per questo!

— Saurabh Prajapati,

Aggiungi questo codice nel file CSS:

input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

Questo aiuterà.

— subindas pm
fonte

Grande! Il pulsante di invio del modulo ora sembra come dovrebbe sul mio iPad

— peterkodermac,

@peterkodermac, per favore, non dimenticare di aggiungere la classe CSS genitore, altrimenti questo potrebbe influenzare ogni campo di input.

— subindas pm

La risposta sopra per l'aspetto del webkit ha fatto la magia, ma il pulsante sembrava ancora pallido / noioso rispetto al browser su altri dispositivi / desktop. Ho anche dovuto impostare l'opacità al massimo (intervalli da 0 a 1)

-webkit-appearance:none;
opactiy: 1

Dopo aver impostato l'opacità, il pulsante sembrava uguale su tutti i diversi dispositivi / emulatore / desktop.

— Priyank Thakkar
fonte