Styling pulsante di input per iPad

Incoerenze nello stile di un pulsante di modulo principalmente durante la visualizzazione in iPad. Per qualche motivo, gli stili CSS per background-color e padding non si applicano in iPad. Ottengo il pulsante di ricerca predefinito, con angoli sfumati e arrotondati, che non è quello che voglio. Voglio anche evitare di usare un'immagine.Styling pulsante di input per iPad

CSS

.mailBtn { 
    background: #fff; 
    border:0; 
    color: #000; 
    font: 0.625em 'SansPro Light',sans-serif; 
    margin: 0 0 0 -3px; 
    padding: 11px 7px 10px; 
    text-transform: uppercase; 
}

HTML

<input type="submit" value="Send" class="mailBtn">

Tutte le idee su come posso mantenere uno stile coerente tra le piattaforme con CSS puro?

fonte

2013-07-30 Babis Sougias

@otinanai Non voglio un'altra richiesta del server per un problema così semplice. –

È necessario utilizzare -webkit-appearance:none nella classe .mailBtn. Inoltre, se hai angoli arrotondati nei campi input, puoi utilizzare -webkit-border-radius:0.

solito ripristinare entrambe le proprietà nei miei elementi del modulo come di seguito:

input, textarea, button { 
    -webkit-appearance: none; /*Safari/Chrome*/ 
    -moz-appearance: none; /*Firefox*/ 
    -ms-appearance: none; /*IE*/ 
    -o-appearance: none; /*Opera*/ 
    appearance: none; 

    -webkit-border-radius: 0; 
}

... in modo che continuo la coerenza di stile tra i browser.

fonte

2013-07-30 13:45:25 otinanai

Grazie! Non ero a conoscenza di questa proprietà. –

C'è anche un margine/riempimento sul pulsante. Qualche modo per risolverlo? –

ripristina appena il margine e il riempimento del pulsante: 'button {margin: 0; padding: 0} ' – otinanai

Si può essere alla ricerca di

-webkit-appearance: none;

Safari CSS appunti su --webkit-aspetto --moz-aspetto
Mozilla Developer Network

Ref Link

fonte

2013-12-05 13:59:27

Styling pulsante di input per iPad

risposta

Problemi correlati