Placeholder en los input con HTML5 y como darles estilo a los placeholder de los input desde css3

Una gran mejora enfocada a formularios que trae de la mano HTML5 y CSS3 es el uso de placeholder. Para quien no lo conozca, un placeholder es ese texto que aparece por defecto en un campo de texto y que en el momento que empezamos a escribir desaparece. Se suelen utilizar en formularios con un texto "escriba aquí su nombre" o "su búsqueda", etc. y con el uso de javascript, se ocultaba el texto al empezar  a escribir. Con la aparición de HTML5, los navegadores empezaron a implementar esta nueva funcionalidad.

Utilizar un placeholder no tiene misterios ni secretos y se pueden utilizar tanto para las cajas de texto como las contraseñas, es decir, en input type text e input type password. Para implementar esta nueva mejora, es tan sencillo como añadir un nuevo atributo placeholder al elemento input con el texto que queramos que muestre en pantalla. A continuación os muestro un formulario de login como ejemplo de como se utilizarían estos nuevos atributos:

<form>
  <input class="user" type="text" placeholder="Usuario" />
  <input class="pass" type="password" placeholder="Contraseña" />
  <input type="submit" />
</form>

¿Es sencillo verdad? Ahora vamos a complicarlo un poco, vamos a darle estilos. Todo el mundo sabe como darles estilos a un elemento, en este caso a un input, pero.... ¿Cómo dar estilos a un placeholder? Tan solo hay que utilizar unos selectores de css especiales porque aún no estan soportados oficialmente por los navegadores, así que funcionan a modo de extensiones experimentales, como el moz-border-radius que lleva unos 7 años en modo experimental. En este caso utilizaremos 2 extensiones, una para webkit (chrome, safari, etc) y otra para mozilla (firefox). Las extensiones son: -webkit-input-placeholder y -moz-placeholder. Os pongo un ejemplo:

.user::-webkit-input-placeholder, .user::-moz-placeholder {
  color: blue;
}

.pass::-webkit-input-placeholder, .pass::-moz-placeholder {
  color: red;
}

Ahora tenéis un formulario de login la mar de mono, con los placeholder azules para el usuario y rojo para la contraseña. Espero que os sirva de ayuda para hacer formularios mas bonitos con HTML5.

3 comentarios en “Placeholder en los input con HTML5 y como darles estilo a los placeholder de los input desde css3

  1. Pingback: Bitacoras.com
  2. Hola me gustaría contactar contigo de alguna manera es para proponerte algo sobre desarrolloweb.com concretamente relacionado con las charlas de jquery quedamos (más ino twitter @jqueryio) gracias

  3. Muy buen articulo, me funciono para aplicarlo en un input con chrome, pero cuando trato de usarlo combinado para chrome y mozilla como en el ejemplo deja de funcionar por lo menos para los colores.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *