Cambiar estilos de el atributo de HTML Placeholder

A continuación vamos a explicar como podemos cambiar el atributo de HTML5 Placeholder de cualquier input.

No olvidar que el atributo de HTML5 Placeholder no es válido para IE9. Si queremos que sea compatible podemos usar el Polyfill Placeholders.js que recomendamos en la sección de Recursos Maquetadores Web.

Para ello vamos a aplicar las etiquetas CSS3 específicas de cada navegador.

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