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) podemos usar el siguiente código #css para hacer el efectoinput.search{ transition:width .3s ease; width:150px;}input.search:focus{ trans
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

Comentarios