Cómo darle estilo a un input search con css

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.