Cambiar el color del texto en el placeholder

A veces algún diseño requiere modificar el color del texto dentro de un text input, esto se logra fácilmente con CSS color, pero si ya lo han intentado, posiblemente se han dado cuenta de que no aplica para el texto del placeholder.

Para modificar el texto, es relativamente sencillo y se logra con la propiedad -placeholder o -input-placeholder, dependiendo del navegador:

::-webkit-input-placeholder { /* Safari y Chrome */
   color: #4679BD;
}

:-moz-placeholder { /* Firefox hasta v18 */
   color: #4679BD;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #4679BD;  
}

:-ms-input-placeholder {  /* IE 10+´*/
   color: #4679BD;  
}

Para cada navegador existe su línea de CSS correspondiente, lamentablemente ésto sólo funciona en versiones modernas de Internet Explorer, pero a su vez sólo existe el atributo placeholder en versiones recientes del mismo, entonces al final no se pierde mucho.

Aunque a primera vista podríamos pensar que para ahorrar espacio podemos juntar todas las reglas en una sóla pues todas definen el mismo color, ésto no es posible, pues recuerden que los navegadores rechazan una definición o regla de estílo en cuanto detectan un valor, atributo o propiedad que no reconocen.

::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder  { /* No funciona */
   color: #4679BD;
}

El efecto sobre escribe al atributo color regular aplicado, digamos, al input directamente, pues de hecho si lo intentan notarán que el color del texto sólo se respeta cuando el input tiene texto definido en el atributo value, o cuando el usuario escribe texto. Éstas reglas de CSS son muy útiles para respetar un diseño que requiere un color específico en los campos de texto y que necesita place holders.

¡Felices sentencias!