Jak usunąć wszystkie domyślne style pól wyszukiwania w Webkit?

Question

Domyślnie <input type="search" /> przedstawia się jako "rodzime" pole wyszukiwania w systemie Mac OS X (zaokrąglone rogi, przycisk kasowania itp.). Chcę całkowicie usunąć ten niestandardowy styl, aby wejście wyglądało identycznie jak równoważne wprowadzanie tekstu (<input type="text" />), ale zachowując typ wejściowy ustawiony na search.

Próbowałem już -webkit-appearance: none;, co jest bardzo bliskie ... ale dzieje się coś zabawnego z marginesami/dopełnieniem, których nie mogę przesłonić, co powoduje, że szerokość pola wyszukiwania zmniejsza się o ~ 20px niż wprowadzenie tekstu.

Czy istnieje inna właściwość, której nie jestem świadomy, aby całkowicie wyłączyć stylizację?

Answer 1

Spróbuj stylings:

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; 
} 

Źródło: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432