Cómo manipular Placeholders con CSS

Cómo manipular Placeholders con CSS

Los elementos Input en HTML5 tienen un atributo llamado “placeholder” que sirve para mostrar un texto que guíe al usuario. En algunos casos es usado para remplazar al elemento label, en otros casos es usado para poner una instrucción para que el usuario llene correctamente el campo.

Desgraciadamente manipular su estilo no es tan sencillo como quisiéramos, ya que el placeholder es un pseudo-elemento que cada navegador implementa bajo sus propias especificaciones.

Utiliza este snippet en tu hoja de estilos para poder ganar control sobre de ellos:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Leave a Reply

Your email address will not be published. Required fields are marked *