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.

1 comentario en “Cambiar estilos de placeholder con CSS”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *