使用 CSS 更改输入的 HTML5 占位符颜色在 Chrome 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9451902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing an input's HTML5 placeholder color with CSS does not work on Chrome
提问by el-teedee
I tried to follow the following topic, but unsuccessfully. Change an HTML5 input's placeholder color with CSS
我试图遵循以下主题，但未成功。 使用 CSS 更改 HTML5 输入的占位符颜色
I tried to colorize my placeholder, but it still stay grey on Chrome 17.0.963.56 m.
我尝试为占位符着色，但它在 Chrome 17.0.963.56 m 上仍然保持灰色。
HTML
HTML
<input type='text' name='test' placeholder='colorize placeholder' value='' />
CSS
CSS
INPUT::-webkit-input-placeholder,
INPUT:-moz-placeholder {
color:red;
}
input[placeholder], [placeholder], *[placeholder]
{
color:green !important;
}
JSfiddle
JSfiddle
On Firefox 10.0.2, it works well.
在 Firefox 10.0.2 上，它运行良好。
回答by Alex
You forget a :.
Because of that, the whole selector got corrupted and didn't work.
http://jsfiddle.net/a96f6/87/
你忘了一个:. 正因为如此，整个选择器被损坏并且无法工作。
http://jsfiddle.net/a96f6/87/
Edit: Seems like (after an update?) this doesn't work anymore, try this:
编辑：似乎（更新后？）这不再起作用，试试这个：
input::-webkit-input-placeholder{
color:red;
}
input:-moz-placeholder {
color:red;
}
Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.
注意：不要混用供应商前缀选择器（-moz、-webkit、-ms、...）。例如，Chrome 无法理解“-moz-”，然后忽略整个选择器。
Edit for clarification:To make it work in all browsers, use this code:
编辑澄清：要使其在所有浏览器中工作，请使用以下代码：
::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}
?
?
回答by Dmitry Pashkevich
As @Alex said, for some reason you can't combine the selectors for multiple browsers.
正如@Alex 所说，出于某种原因，您无法为多个浏览器组合选择器。
This will work
这将工作
::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}
But this won't work(in Chrome at least):
但这不起作用（至少在 Chrome 中）：
::-webkit-input-placeholder,
::-moz-placeholder,
::-ms-placeholder,
::placeholder {
color:red;
}
Looks like a browser implementation quirk to me.
对我来说看起来像是浏览器实现的怪癖。
Also, note that you don't have to define placeholder styles globally, you can still scope the ::placeholderselector just like you normally do. This works:
另外，请注意，您不必全局定义占位符样式，您仍然可以::placeholder像往常一样限定选择器的范围。这有效：
.my-form .input-text::-webkit-input-placeholder {
color:red;
}
.my-form .input-text::-moz-placeholder {
color:red;
}
回答by user agent
I have just experienced the same problem and thought it would be good to share. For some reason, the color was not changing on firefox and I noticed that its only when I use hexadecimal values so I did it this way for a particular website:
我刚刚遇到了同样的问题，并认为分享会很好。出于某种原因，firefox 上的颜色没有改变，我注意到它仅在我使用十六进制值时才发生，所以我对特定网站这样做了：
::-webkit-input-placeholder {
color: #666666;
}
::-moz-placeholder {
color: black;
}
::-ms-placeholder {
color: #666666;
}
::placeholder {
color: #666666;
}
回答by Michael Christensen
::-webkit-input-placeholder {
color: #008000;
}
