Cómo animar el ancho de una caja de texto cuando se hace foco en ella

Para animar una caja de texto (Como el de un buscador) al momento del evento "FOCUS" (Cuando obtiene el foco)...
Publicado
Actualizado
Engagements 0 Comentario

Para animar una caja de texto (Como el de un buscador) al momento del evento "FOCUS" (Cuando obtiene el foco) podemos usar el siguiente código css para hacer el efecto

input.search{
          transition:width .3s ease;
          width:150px;
        }
        input.search:focus{
          transition:width .3s ease;
          width:300px;
          
        }
<input class="search" placeholder="Buscar..." type="search">

A continuación un ejemplo más elaborado en codepen

 

Ver ejemplo en codepen

Comprar y Vender criptomonedas nunca fue tan fácil

Entra y compruebalo, dale click en la siguiente imagen.

Comentarios