Изменение цвета ввода-кода 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
В 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;
}