Telefono: +39 392 33 73 731

Fix CSS al campo input di tipo "search"

In HTML5 abbiamo a disposizione il campo di tipo search; Firefox lo considera come un normale input text, stilizzabile facilmente al modo consueto, però i browser Safari e Chrome invece impongono dei loro stili specifici, e non accettano altri bordi e background.

Per far ubbidire anche questi browser dobbiamo inserire nel nostro css un piccolo reset: il seguente fix riporta l'apparenza al default di un normale campo testo (usando -webkit-appearance "textfield" oppure "none") e poi rimuove gli altri stili specifici dei browser Webkit.

 

input[type=search] {
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
	outline:none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
Lunedì 21 Gennaio 2013
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento