css - 使用 CSS 更改输入的 HTML5 占位符颜色在 Chrome 上不起作用

Question

我尝试关注以下主题，但没有成功。 Change an HTML5 input's placeholder color with CSS

我尝试为我的占位符着色，但它在 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/

在 Firefox 10.0.2 上运行良好。

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