Cambiar estilos de placeholder con CSS

El texto de placeholder en las celdas de formularios (input) viene por defecto en un tono gris claro. Para cambiarlo tan solo debemos añadir las siguientes propiedades con prefijos específicos del navegador (webkit y mozilla).

/* all */

::-webkit-input-placeholder { color:#555; }

::-moz-placeholder { color:#555; } /* firefox 19+ */

:-ms-input-placeholder { color:#555; } /* ie */

input:-moz-placeholder { color:#555; }

/* individual: webkit */

#nombre::-webkit-input-placeholder { color: orange; }

#apellidos::-webkit-input-placeholder { color: green; text-transform:uppercase; }

/* individual: mozilla */

#nombre::-moz-placeholder { color: orange; }

#apellidos::-moz-placeholder { color: green; text-transform:uppercase; }

Aquí puedes ver una demostración de cómo cambiar los estilos CSS en placeholder.

Una Respuesta

Sarita 3 diciembre, 2015

que decir…. MIL MILLONES DE GRACIAS…. me he vuelto loca buscando la solución y al final aquí la tenía. Un abrazo muy fuerte!

Responder