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 impongono i loro stili specifici, e non accettano bordi e background.

Per obbligarli a rispettare le nostre regole 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;
}