Zmiana koloru znaku zastępczego HTML5 dla danych wejściowych za pomocą CSS nie działa w przeglądarce Chrome

Question

Próbowałem wykonać poniższy temat, ale bezskutecznie. Change an HTML5 input's placeholder color with CSS

Próbowałem pokolorować mój symbol zastępczy, ale nadal pozostaje szary na 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/

W przeglądarce Firefox 10.0.2 działa poprawnie.

Answer 1

Zapominasz o :. Z tego powodu cały selektor został uszkodzony i nie działał. http://jsfiddle.net/a96f6/87/

Edit: Wydaje się (? Po aktualizacji) to już nie działa, spróbuj tego:

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

Uwaga: nie mieszać sprzedawca selektorów prefiksu (-moz, -webkit , -ms, ...). Chrome na przykład nie zrozumie "-moz-", a następnie zignoruje cały selektor.

Edycja dla wyjaśnienia: Aby to działa we wszystkich przeglądarkach, użyj tego kodu:

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

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

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

Answer 2

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

Answer 3

Jak powiedział @Alex, z jakiegoś powodu nie możesz połączyć selektorów dla wielu przeglądarek.

Ten zadziała

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

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

::-ms-placeholder { 
    color:red; 
} 

::placeholder { 
    color:red; 
} 

Ale to nie zadziała (w Chrome przynajmniej):

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

Wygląda jak dziwactwo realizacji przeglądarka do mnie.

Należy również pamiętać, że nie trzeba definiować stylów zastępczych na całym świecie, nadal można zmieniać zakres wyboru ::placeholder tak, jak zwykle. Działa to:

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

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

Answer 4

Po prostu doświadczyłem tego samego problemu i pomyślałem, że warto się nim dzielić. Z jakiegoś powodu, kolor nie zmieniał na firefox i zauważyłem, że jej tylko wtedy, gdy używam wartości szesnastkowe więc zrobiłem to w ten sposób dla danej stronie internetowej:

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

::-moz-placeholder { 
    color: black; 
} 

::-ms-placeholder { 
    color: #666666; 
} 

::placeholder { 
    color: #666666; 
}