Front.id

Vamos a abordar la forma de animar los labels de nuestros input de tipo texto, independientemente de la plataforma en que hayamos desarrollado el sitio y haciendo uso de un poco de jQuery mezclado con CSS.

La estructura usual de nuestro elemento es:

    <div class="wrapper">
        <label for="el1">Label</label>
        <input id="el1" type="text"/>
    </div>

Nuestro objetivo es abordar el comportamiento en cada estado de nuestro elemento: 

• Cuando se hace foco y se pierde sin haber escrito algo. 
• Cuando se hace foco y se pierde luego de haber escrito algo.

Justamente para poder personalizar esto, es que vamos a implementar unas lineas de jQuery:

$(document).ready(function () {
  $('input').each(function () {
    // Agregamos el class active al contenedor cuando se hace foco
    // sobre el input.
    $(this).on('focus', function () {
      $(this).parent('.wrapper').addClass('active');
    });
    // Retiramos el class active al contenedor cuando se pierde el
    // foco sobre el input y esta vacio.
    $(this).on('blur', function () {
      if ($(this).val().length === 0) {
        $(this).parent('.wrapper').removeClass('active');
      }
    });
    // Con esto evaluamos si el input tiene contenido
    // y mantenemos el class.
    if ($(this).val() !== '') {
      $(this).parent('.wrapper').addClass('active');
    }
  });
});

A partir de este momento ya contamos con el class active en el contenedor que nos va a permitir manipular input y label a nuestro antojo, es el momento de dejar volar nuestra imaginación.

Ejemplo

Acompaño algunos ejemplos de muestra: