jueves, 2 de octubre de 2014

Placeholder y su uso en HTML5 y CSS3

Placeholder HTML5 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

0 comentarios:

Publicar un comentario