Placeholders colors.. wtf?

Hola !!!!!!!!!!! , mi pregunta es la siguiente:

Tengo unos campos en un formulario de contacto en donde aparece como "label" un placeholder , por ejemplo: placeholder="Tu E-Mail..." , me parece perfecto ese método ya que al hacer focus sobre el campo la frase de descripción (placeholder) desaparece y se puede escribir sin problema , además no ocupo lugar con los labels que me molestan, no me gustan y no quiero utilizarlos.
El único inconveniente con el que me cruce es que en internet explorer el placeholder mantiene el mismo color que el que se le de a las fuentes en la css del campo que estemos usando el mismo, pero en safari, Firefox y chrome el place holder aparece de color gris clarito y mis campos son justamente gris claritos así que no se ve nada.
Como hago para que el placeholder en google chrome , firebox y safari tengan color blanco? le puedo dar al placeholder una css individual para forzar esto en el resto de los navegadores? o hay otra manera?

Gracias!!

Esto te va ayudar :
http://xitrus.es/blog/103/Personaliza_el_Placeholder_en_tus_formularios

Código CSS :

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

Gracias capo, me parece buenísima la información que me pasaste, de hecho yo había visto algo similar en varias ocasiones pero realmente te juro que no se como colocarlo, no le encuentro la vuelta. mira te muestro justo un ejemplo de mi campo "nombre" con su css y a ver como lo coloco eso ahí?

Código HTML :

<input name="nombre" type="text" class="nombre" id="nombre" placeholder="*Nombre"/>

Código CSS :

.nombre {
   height: 35px;
   width: 345px;
   background-color: #b8babc;
   color: #FFF;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   font-family: "Open Sans";
   font-size: 14px;
   padding-left: 10px;
}
.nombre:focus {
   height: 35px;
   width: 343px;
   color: #000;
   font-family: "Open Sans";
   font-size: 14px;
   padding-left: 10px;
   background-color: #FFF;
   border: thin solid #B8BABC;
}

Gracias !

Si quieres aplicar esto a todos los placeholder solo tienes que poner lo así

Código CSS :

  .nombre {
   height: 35px;
   width: 345px;
   background-color: #b8babc;
   color: #FFF;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   font-family: "Open Sans";
   font-size: 14px;
   padding-left: 10px;
}
.nombre:focus {
   height: 35px;
   width: 343px;
   color: #000;
   font-family: "Open Sans";
   font-size: 14px;
   padding-left: 10px;
   background-color: #FFF;
   border: thin solid #B8BABC;
}



::-webkit-input-placeholder{
color:#f00;
}
:-moz-placeholder{ /* Firefox 18- */
color:#00AEDB;
}
::-moz-placeholder{ /* Firefox 19+ */
color:#00AEDB;
}
:-ms-input-placeholder{
color:#00AEDB;
}

si quieres aplicarlo a un input en especifico tienes que hacerlo así

Código CSS :

input.nombre::-webkit-input-placeholder{
color:#f00;
}

Perfecto, gracias.

La verdad en Internet Explorer, en google chrome y en safari (el cual no teníamos en cuenta) funciono perfecto!

Pero en Firefox, la verdad siguen siendo de color gris , que raro por que es justamente el que mas condiciones lleva en la css.

A mi si me funciona , si esta ocupando el especifico recuerda poner las etiquetas

Código CSS :

input.nombre::-webkit-input-placeholder{
color:#f00;
}
input.nombre:-moz-placeholder{ /* Firefox 18- */
color:#f00;
}
input.nombre::-moz-placeholder{ /* Firefox 19+ */
color:#f00;
}
input.nombre:-ms-input-placeholder{
color:#f00;
}

Mmmm, probe poniendo las etiquetas pero tampoco me funciona en Firefox. No se por que, todos menos Firefox.

Debe ser por que tienes una versión muy antigua y no lo soporta.

barrierp escribió:

¿Y Opera?

Tengo el Firefox 22.0 , el ultimo , le di a actualizar e instalo este mismo, continua saliendo de color gris.

En cuanto a Opera , sale de color negro.

En otro foro me ofrecieron esto:

Código HTML :

<![if !IE]>
 <style>
   placeholder {
     color: white;
     background-color: white;
   }
 </style>
<![endif]>

Colocandolo en el head , todos los navegadores que no fueran internet explorer podrían leerlo forzadamente en esos colores, pero no me funciona en absoluto.

Demos el tema por solucionado ya que en otros foros también me dijeron que les funciona en Firefox por lo que debo ser yo , baya a saber cual será la causa , lo importante es que seguramente en otra pc el problema va a estar solucionado y eso es lo que necesito , que los usuarios lo vean correctamente asi que , puede que solo yo ,en mi pc,no lo este viendo como debe ser.

Muchas gracias!!!!