6 respuestas en este tema

[barrierp]

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!!

[Sephiroth_801]

Según estuve leyendo, hay que dar un estilo diferente dependiendo del navegador y ciertas versiones de estos no los soportan.

<style type="text/css">
.caja::-webkit-input-placeholder { /* WebKit browsers */
    color: #FF0000;
}
.caja:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #FF0000;
}
.caja::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #FF0000;
}
.caja:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #FF0000;
}
</style>

Un ejemplo para un elemento que tiene clase caja, ahí puedes ir probando, ya que de CSS no conozco mucho.

[barrierp]

Muy buen dato amigo, lo único es que intente ponerlo pero me cambia todo, por ejemplo si quisiera ponerle en el campo "nombre" por ejemplo, donde irían?

este es el campo nombre en mi caso:

.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;
}

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

[Sephiroth_801]

Puede ser algo como:

.nombre::-webkit-input-placeholder { /* WebKit browsers */
    color: #FF0000;  
    background-color:#990033;
}
.nombre:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #FF0000;
    background-color:#990033;
}
.nombre::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #FF0000;
    background-color:#990033;
}
.nombre:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #FF0000;
    background-color:#990033;
}

Pero tienes que ir probando el efecto que quieres que quede, tomando en cuenta los distintos navegadores y sus versiones.

[barrierp]

Ok , gracias , mira lo solucione pero no del todo.

La solución fue simplemente poner esto y que afecte a todos:

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

Pero igualmente me ocurre lo siguiente:

1- Internet Explorer lo muestra perfecto (color blanco , como yo lo quiero)

2- Google Chrome lo muestra perfecto, color blanco también.

3- Mozilla lo sigue mostrando de color gris ( tengo la ultima versión 22.0 y además probé de colocarlo individualmente para cada campo con su nombre y funciona pero Firefox sigue mostrándolo gris )

4-Opera, no se que tipo de soporte tenga Opera pero lo muestra de color negro.

5-Safari lo muestra perfecto , de color blanco.

O sea, funciona en 3 , falla en dos, pero me llama poderosamente la atención que falle en Firefox.

[Sephiroth_801]

Bueno en Opera hasta la versión 12, no tiene soporte para CSS, pero en FF, me funciono, coloque el atributo color:#00F !important;, lo muestra azul, probado también en la versión 22.0.

[barrierp]

Bueno , coloque important y tampoco, pero al parecer soy el único ya que también en otras partes me dijeron que si les funciona.. inclusive subi el form al servidor y nada! .. se ve gris! , quizás sea yo y en otras pc se ve bien asi que eso seria lo único important! jaja.
vamos a decir que esta solucionado.

Gracias!!