Изменение цвета заполнителя HTML5 для ввода с помощью CSS не работает в Chrome

Question

Я пытался следовать следующей теме, но безуспешно. Изменение цвета заполнителя ввода HTML5 с помощью CSS

Я пытался раскрасить свой заполнитель, но он все еще остается серым на Chrome 17.0.963.56 м.

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/

На Firefox 10.0.2 он работает хорошо.

Answer 1

Вы забыли :. Из-за этого весь селектор был поврежден и не работал. http://jsfiddle.net/a96f6/87/

Edit: Похоже (после обновления?) Это больше не работает, попробуйте это:

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

Примечание: не смешивайте селекторные префиксы поставщиков (-moz, -webkit, -ms, ...). Например, Chrome не будет понимать «-moz-», а затем игнорирует весь селектор.

Редактировать для уточнения: Чтобы он работал во всех браузерах, используйте этот код:

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

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

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

::placeholder {
    color:red;
}

1015 *

Answer 2

Как сказал @Alex, по некоторым причинам вы не можете комбинировать селекторы для нескольких браузеров.

Это будет работать

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

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

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

::placeholder {
    color:red;
}

Но это не будет работать (по крайней мере, в Chrome):

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

Похоже, мне не нравится реализация браузера.

Также обратите внимание, что вам не нужно определять стили заполнителей глобально, вы все равно можете использовать селектор ::placeholder так же, как обычно. Это работает:

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

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

Answer 3

Я только что столкнулся с той же проблемой и подумал, что было бы хорошо поделиться. По какой-то причине цвет не изменился в Firefox, и я заметил, что это только когда я использую шестнадцатеричные значения, поэтому я сделал это таким образом для определенного веб-сайта:

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

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

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

::placeholder {
    color: #666666;
}

Answer 4

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