Il sempre ottimo David Walsh ha pubblicato qualche tempo fa uno snippet dedicato allo styling dei campi di input in Web application visualizzabili tramite la viewport del tablet iPad prodotto dalla Casa di Cupertino; nello specifico lo sviluppatore ha voluto eliminare l’effetto ombra dagl “input text elements” e, per far questo, ha fatto ricorso alla proprietà “-webkit-appearance”.
Ecco la regola utilizzata per ottenere l’effetto desiderato:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
-webkit-appearance: caret;
-moz-appearance: caret;
}
Da notare l’introduzione all’interno della regola della proprietà:
-moz-appearance: caret;
Che renderà l’effetto compatibile anche con il browser Firefox (oltre che con il programma per la navigazione Internet di default che nell’iPad è Safari); per completare l’opera, e rendere i campi di input più evidenti nonostante la rimozione dell’ombra, Walsh ha utilizzato l’attributo HTML5 “placeHolder”.
