¿Cómo elimino todo el estilo del campo de búsqueda predeterminado de Webkit?

Question

De forma predeterminada, <input type="search" /> se representa como un campo de búsqueda "nativo" en Mac OS X (esquinas redondeadas, botón borrar, etc.). Quiero eliminar completamente este estilo personalizado para que la entrada se vea idéntica a una entrada de texto equivalente (<input type="text" />), pero manteniendo el tipo de entrada configurado en search.

He intentado -webkit-appearance: none;, lo que se pone muy cerca ... pero hay algo gracioso pasando con márgenes/relleno que parece que no puedo anular, lo que hace que el ancho del campo de búsqueda se muestre ~ 20px más corto que una entrada de texto.

¿Existe alguna otra propiedad -webkit- que no conozca para deshabilitar totalmente el diseño?

Answer 1

Pruebe estos estilos de:

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

Fuente: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432