Cambiar el color de los placeholder con CSS

El ‘placeholder‘ es el texto que aparece por defecto en los campos de formulario, antes de que el usuario introduzca nada’ y sirven para dar indicaciones sobre el tipo de contenido que se ha de introducir.

La diferencia principal entre poner un valor por defecto al campo o poner un placeholder, es que en el primer caso el campo toma ese valor, es decir, si se envía el formulario tal cual, se guardarán los valores por defecto que se hayan puesto. En cambio, con el placeholder, el campo no tiene valor hasta que el usuario lo introduce, son sólo textos explicativos.

Por defecto, el placeholder es de color gris bastante claro, pero según el estilo de nuestro formulario es posible que queramos cambiarlo (si tenemos los campos con algún color de fondo, por ejemplo)

Podemos hacerlo fácilmente mediante los siguientes tricks de CSS:

::-webkit-input-placeholder { color: red; } 
:-moz-placeholder { /* Firefox 18- */ color: red; } 
::-moz-placeholder { /* Firefox 19+ */ color: red; } 
:-ms-input-placeholder { color: red; }

Además, según el sistema operativo y navegador, al hacer clic en el campo, el placeholder desaparece, en cambio en iOS no es así. Para conseguir el mismo efecto, puedes utilizar el siguiente CSS

:focus::-webkit-input-placeholder{color:transparent;}