Chrome支持 占位符属性 上 input[type=text] 元素（其他人可能也这样做）。
但以下 CSS 对占位符的值没有任何作用：
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value">
2000
2018-04-09 20:36
起源
快速抬头（不是解决方案，只是一个FYI）：如果我没记错，输入[占位符]只匹配具有占位符属性的<input>标记，它与占位符属性本身不匹配。 - pinkgothic
是的，这个想法让我想到这可能就像试图设计元素的“标题”属性一样。所以+1思维一样！ - David Murdoch
@MathiasBynens ：placeholder-shown伪类匹配显示此类占位符文本的输入元素。 所以它匹配 <input> 标签，像 input 选择器，但现在显示占位符文本。它也与占位符属性本身不匹配。 - HEX
@HEX它不像 input 选择器，因为它选择所有 input 元素。 :placeholder-shown 只选择 input 当前显示占位符的元素，允许您仅设置这些元素的样式，并有效地设置占位符文本的样式。你想说什么？ - Mathias Bynens
@HEX（当然，它也选择了 textarea 显示占位符文本的元素。） - Mathias Bynens
答案:
履行
有三种不同的实现：伪元素，伪类和什么都没有。
- WebKit，Blink（Safari，谷歌Chrome，Opera 15+）和Microsoft Edge正在使用伪元素：
::-webkit-input-placeholder。 [参考] - Mozilla Firefox 4到18使用的是伪类：
:-moz-placeholder（一 结肠）。 [参考] - Mozilla Firefox 19+正在使用伪元素：
::-moz-placeholder，但旧的选择器仍然会工作一段时间。 [参考] - Internet Explorer 10和11正在使用伪类：
:-ms-input-placeholder。 [参考] - 2017年4月： 大多数现代浏览器都支持简单的伪元素
::placeholder[参考]
Internet Explorer 9及更低版本不支持 placeholder 属性，而 Opera 12及更低版本不支持 任何占位符的CSS选择器。
关于最佳实施的讨论仍在继续。注意伪元素就像真实元素一样 暗影DOM。一个 padding 在...上 input 将不会获得与伪元素相同的背景颜色。
CSS选择器
用户代理需要忽略具有未知选择器的规则。看到 选择者等级3：
一个 组 包含无效选择器的选择器无效。
所以我们需要为每个浏览器单独的规则。否则，所有浏览器都会忽略整个组。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}<input placeholder="Stack Snippets are awesome!">使用说明
- 小心避免不良对比。 Firefox的占位符似乎默认为不透明度降低，因此需要使用
opacity: 1这里。 - 请注意，如果占位符文本不适合，则会将其截断 - 调整输入元素的大小
em并使用最小的字体大小设置来测试它们。不要忘记翻译：某些语言 需要更多空间 对于同一个词。 - 支持HTML的浏览器
placeholder但是没有CSS支持（如Opera）也应该进行测试。 - 有些浏览器会为某些浏览器使用额外的默
input类型（email，search）。这些可能会以意想不到的方式影响渲染。使用 性能-webkit-appearance和-moz-appearance改变这一点。例：
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
4531
2018-06-06 08:47
另请注意，虽然Webkit认为这具有相当强的特异性，但Mozilla却没有。你可能不得不在那里弹出几个重要的东西来让事情显现出来。 - dmnc
@toscho：谢谢你的回答。我只需要对它进行一些“实时”演示，所以你的例子也可以在这里找到： jsfiddle.net/Sk8erPeter/KyVXK。再次感谢。 - Sk8erPeter
Firefox的占位符似乎默认为不透明度降低。对于任何其他人都很难刷新，并想知道为什么这似乎不起作用（“为什么我的白色文字仍然是灰色......”），使用不透明度：1 - jwinn
在IE10中 *:-ms-input-placeholder 和 :-ms-input-placeholder 本身不起作用，但是 INPUT:-ms-input-placeholder 确实。奇。 - Jared
Bootstrap 3的注意事项：“form-control”类会因CSS特异性而覆盖颜色（即“form-control :: - webkit-input-placeholder”），因此您需要至少具体或使用“！important”在你的CSS中。 （这是调试的地狱，因为Firebug和Devtools似乎都没有显示这个伪类） - Costa
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>这将是所有的风格 input 和 textarea 占位符。
重要的提示： 不要将这些规则分组。相反，为每个选择器创建一个单独的规则（组中的一个无效选择器使整个组无效）。
656
2018-02-09 16:44
您链接到的MSDN文档，声明它仅在Internet Explorer 10中受支持。仍然是一个很好的发现，但在IE10用户群变得重要之前不是很有用（我们可能会考虑多年的时间框架）。 - danishgoel
实际上，您希望统一对整个站点中的占位符进行样式设置，而不是按ID对每个输入进行样式设置。 - BadHorsie
在FF19之后你必须使用:: - moz-placeholder - viplezer
如果你还在输入上应用了一个类，你需要把这个CSS放在样式表的底部，以便让它在IE上工作（11）。在JSFiddle上看到这个fork jsfiddle.net/9kkef。在IE和另一个浏览器中打开页面，在IE中，您将看到占位符文本将采用所应用类的颜色。 - Timo002
您可能还想要样式textareas：
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
260
2017-09-14 12:52
在chrome中打印不起作用...任何帮助@media print {input [type = text] .form-control :: - webkit-input-placeholder，input [type = textarea] .form-control :: - webkit -input-placeholder {color：#FFFFFF; }} - Mahdi Alkhatib
对于 引导 和 减 用户，有一个mixin .placeholder：
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
96
2018-02-14 21:11
甚至更简单，编辑变量 @input-color-placeholder - 通常在 variables.less - William
@William是不是更容易定义选择器本身并使用mixin避免必须返回并更改它以防你想要使另一个输入的占位符为另一种颜色？ - Brandito
@Brandito - 听起来像边缘情况 - 通常占位符颜色对于设计中的所有表单元素都是相同的。 - William
@William对不起，我对这个问题的措辞很糟糕，我认为将mixin与你想要的输入颜色的参数一起使用会更好，尽管老实说，我可能正在考虑边缘情况。我习惯于（将搜索输入占位符设置为彩色背景上的样式：P）很抱歉，但你是对的，道歉。 - Brandito
@Brandito一切都很好。总有边缘情况。 - William
除了toscho的回答，我还注意到Chrome 9-10和Safari 5之间的一些webkit不一致，支持的CSS属性值得注意。
特别是Chrome 9和10不支持 background-color， border， text-decoration 和 text-transform 在为占位符设置样式时。
完整的跨浏览器比较是 这里。
92
2018-04-14 02:28
对于 萨斯 用户：
// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
68
2018-06-25 09:01
更灵活的方式 - 使用 @content; - milkovsky
这样可以正常工作。 在这里演示：
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #666;
}<input type="text" placeholder="Value" />
51
2017-10-08 19:21
我不得不在Firefox v56中添加！important - Savage