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

Я попытался выполнить следующую тему, но безуспешно. Измените цвет заполнителя ввода 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 он работает хорошо.

Ответ 1

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

Изменить: Похоже, что (после обновления?) Это больше не работает, попробуйте следующее:

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

Ответ 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;
}

Ответ 3

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

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

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

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

::placeholder {
    color: #666666;
}

Ответ 4

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