Hoy en dia todos deberíamos conocer el nuevo input search de HTML5, que nos facilita montar una caja de búsqueda en nuestros formularios. Pero si aun no han probado este nuevo elemento, tiene un estilo por defecto que muchos pensábamos que no se podia modificar, ademas el estilo por defecto tambien depende del navegador que lo renderize.
En css casi todo es posible y hay algunos metodos por los cuales podemos romper el estilo por defecto para darle algo mas personal o que combine con nuestros diseños.
Crear un elemento input search
Es muy facil, tan solo es escribir algo así:
<input name="s" type="search" />
Es demasiado parecido a cualquier input de texto, solo cambiamos el tipo y listo.
Eliminar estilo por defecto del input search
Como varias cajas de texto o botones, siempre hay un modo de romper sus estilos por defecto y para este caso solo aplicamos esto:
input[type=search] { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; }
Deven recordar los selectores en CSS y ademas las extenciones propietarias que vimos en , con esto rompemos el estilo y ahora como cualquier caja de texto podemos agregar estilos a nuestro gusto.
Ejemplo de como agregar estilos a input search
Después de romper el estilo por defecto lo podemos manejar como un input común y corriente, no hay nada de magia negra, ni nada de trucos, solo un elemento cotidiano.
input[type=search] { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; height: 30px; width: 200px; background: #CCC; color: orangered; }
Quizá digan que son estilos de mal gusto, pero sirven para que se percaten de que si se pueden agreagar algo asi, espero les sirva este pequeño tutorial.
También hay que recordar que la propiedad ‘appearance’ se puede aplicar a mas elementos del DOM, por ejemplo, los input:checkbox.
Interesante