Los navegadores modernos soportan el uso del atributo placeholder para mostrar un texto de ayuda en los campos del formulario. El problema es que quiero aplicar estilos a ese texto (que por defecto se ve gris muy claro) y el siguiente código no me funciona:
input[placeholder], [placeholder], *[placeholder] { color: red !important; }
Este es mi código HTML:
<input type="text" placeholder="Valor" />
El texto Valor se muestra gris claro en vez de rojo. Así que, ¿es posible cambiar los estilos del texto placeholder de los formularios HTML5?
Estás leyendo una traducción autorizada de la pregunta Change an input's HTML5 placeholder color with CSS planteada por David Murdoch en StackOverflow.
Respuestas
Como suele suceder con CSS, tendrás que aplicar un montón de reglas similares para aplicar los estilos en todos los navegadores:
*::-webkit-input-placeholder { /* Google Chrome y Safari */ color: red; } *:-moz-placeholder { /* Firefox anterior a 19 */ color: red; } *::-moz-placeholder { /* Firefox 19 y superior */ color: red; } *:-ms-input-placeholder { /* Internet Explorer 10 y superior */ color: red; }
Estos estilos se aplican no sólo a los elementos <input> sino también a los <textarea>.
Un comentario importante: no intentes agrupar los estilos anteriores de la siguiente manera:
*::-webkit-input-placeholder, *:-moz-placeholder, *::-moz-placeholder, *:-ms-input-placeholder { color: red; }
El motivo es que cuando se encadenan varios selectores, si uno de ellos es erróneo, se invalidan todos los demás y no se aplican los estilos. Así que como todos los navegadores considerarán erróneos los selectores que no entienden, el resultado será que no se aplican los estilos.
@librosweb