soy Kseso y esto EsCSS

Mira ma, estoy buscando! Animaciones en los inputs search

Una forma de personalizar los input tipo search y hacerle notorio y diferente al usuario el :hover y el :focus

Mira ma, estoy buscando! Animaciones en los inputs search

·Por Kseso ✎ 3
Campo y botón de búsqueda animado
Mira ma, estoy buscando! Una demo.

Entre esos detalles que marcan la diferencia y la singularidad de una página están los elementos con los que el usuario puede interactuar y los efectos visuales y comportamientos asociados a ellos.

En otras ocasiones he traído al blog algunos ejemplos, como estos efectos al :hover en los enlaces. Hoy toca un vistazo a los campos de búsqueda input type='search' (o cualquier otro) para hacerlos más notorios en sus distintos estados.

Puestos a hacerlo... mejor con estilo

Básicamente la idea consiste en indicar y diferenciar si el usuario hace un :hover sobre el input o su label y si lo activa (vía click del ratón o mediante navegación por teclado) y está listo para introducir texto en él.

Para ello cambiamos la sombra de ambos (campo y su etiqueta) o mostramos los pseudoelementos de la etiqueta con una animación diferente para el :hover y para el :focus.

Eso sí, como no soy muy partidario de los elementos que se mueven excepto si el usuario los dispara por alguna acción y sólo mientras persiste la acción, verás que todo está quietecito por defecto.

Pero mejor experimenta con la demo:

See the Pen Correveidile by Kseso (@Kseso) on CodePen.

Ver demo a full _ Descargar códigos

Todo lo anterior radica en el uso de los selectores Css (y sus combinadores) apropiados. Porque lo que son los efectos, ya sabes lo que decía Marx, Groucho Marx:

Estos son mis estilos, Señora.
Si no le gustan tengo otros.

Y esto es todo por hoy. Cualquier cosa, sugerencia, consulta o indicación, ya sabes. Abajo tienes los comentarios.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso