css - texto - sass placeholder color

Cambiar el color de marcador de posición HTML5 de una entrada con CSS no funciona en Chrome

Question

Traté de seguir el siguiente tema, pero sin éxito. Cambiar el color del marcador de posición de una entrada HTML5 con CSS

Traté de colorear mi marcador de posición, pero sigue siendo gris en Chrome 17.0.963.56 m.

HTML

<input type=''text'' name=''test'' placeholder=''colorize placeholder'' value='''' />

CSS

INPUT::-webkit-input-placeholder,
INPUT:-moz-placeholder {
color:red;
}
input[placeholder], [placeholder], *[placeholder]
{
color:green !important;
}

JSfiddle

• http://jsfiddle.net/F4xfV/1/

En Firefox 10.0.2, funciona bien.

Answer 1

Acabo de experimentar el mismo problema y pensé que sería bueno compartirlo. Por alguna razón, el color no cambiaba en Firefox y noté que es solo cuando uso valores hexadecimales, así que lo hice de esta manera para un sitio web en particular:

::-webkit-input-placeholder {
color: #666666;
}
::-moz-placeholder {
color: black;
}
::-ms-placeholder {
color: #666666;
}
::placeholder {
color: #666666;
}

Answer 2

Como dijo @Alex, por alguna razón no puedes combinar los selectores para múltiples navegadores.

Esto funcionará

::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}

Pero esto no funcionará (al menos en Chrome):

::-webkit-input-placeholder,
::-moz-placeholder,
::-ms-placeholder,
::placeholder {
color:red;
}

Parece una peculiaridad de implementación del navegador para mí.

Además, tenga en cuenta que no tiene que definir estilos de marcador de posición de forma global, aún puede aplicar el mismo alcance al selector de ::placeholder como lo hace normalmente. Esto funciona:

.my-form .input-text::-webkit-input-placeholder {
color:red;
}
.my-form .input-text::-moz-placeholder {
color:red;
}

Answer 3

Olvidas a : Debido a eso, todo el selector se corrompió y no funcionó. http://jsfiddle.net/a96f6/87/

Editar: parece que (¿después de una actualización?) Esto ya no funciona, prueba esto:

input::-webkit-input-placeholder{
color:red;
}
input:-moz-placeholder {
color:red;
}

Nota: no mezcle los selectores de prefijo del proveedor (-moz, -webkit, -ms, ...). Chrome, por ejemplo, no comprenderá "-moz-" y luego ignorará todo el selector.

Edite para aclarar: para que funcione en todos los navegadores, use este código:

::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}

1.

Answer 4

::-webkit-input-placeholder {
color: #008000;
}