¿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:
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
Comentarios
Publicar un comentario