Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder?

Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input>, cuando introduzcamos un valor se sustituirá automáticamente.

Sintaxis HTML

Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo.

<input type="text" name="example" placeholder="Ejemplo de Placeholder">

Debajo podemos ver un ejemplo del código anterior.

Soporte en navegadores

A continuación podemos ver una lista con el soporte en los principales navegadores:

  Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+

Sintaxis CSS

Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie.

::-webkit-input-placeholder {
  color: #2c3e50;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #2c3e50;
}
:-ms-input-placeholder {
  color: #2c3e50;
}
:-moz-placeholder { /* Firefox 18- */
  color: #2c3e50;
}

Una vez vista la sintaxis, vamos a ver que estilos soporta:

• font (propiedades)
• color
• background (propiedades)
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity

Para terminar hay que tener en cuenta que algunos navegadores aplican por defecto una opacidad a Placeholder, por lo que un dato a tener en cuenta será implementar opacity: 1