如何设置“占位符”文本的颜色？答案

【问题标题】：How to set the color of "placeholder" text?如何设置“占位符”文本的颜色？
【发布时间】：2011-08-15 21:44:45
【问题描述】：

可以设置placeholder文字的颜色吗？

<textarea placeholder="Write your message here..."></textarea>

【问题讨论】：

这里有一个非常完整（而且更好）的答案：stackoverflow.com/questions/2610497/…
Change an input's HTML5 placeholder color with CSS的可能重复

标签： css html colors

【解决方案1】：

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

【讨论】：

【解决方案2】：

没有人喜欢“参考这个答案”的答案，但在这种情况下它可能会有所帮助：Change an HTML5 input's placeholder color with CSS

由于它只被几个浏览器支持，你可以试试 jQuery 占位符插件（假设你可以\正在使用 jQuery）。它允许您通过 CSS 设置占位符文本的样式，因为它实际上只是对焦点事件执行的交换技巧。

不过，该插件不会在支持它的浏览器上激活，因此您可以使用针对 chrome\firefox 的 CSS 和 jQuery 插件的 CSS 来捕捉其余部分。

插件可以在这里找到：https://github.com/mathiasbynens/jquery-placeholder

【讨论】：

【解决方案3】：

试试这个

textarea::-webkit-input-placeholder {  color: #999;}

【讨论】：

【解决方案4】：

要为占位符指定颜色，只需使用以下代码行：

::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; } 
:-o-input-placeholder { color: red; }

【讨论】：

-o-input-placeholder 用于哪个浏览器？
@HEADLESS_0NE 可能是 Opera 浏览器

【解决方案5】：

#Try this:

input[type="text"],textarea[type="text"]::-webkit-input-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]::-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-ms-input-placeholder {
    color:#f51;
}

##Works very well for me.

【讨论】：

【解决方案6】：

试试this

input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #f51;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #f51;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #f51;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #f51;
}

&lt;input type="text" placeholder="Value" /&gt;

【讨论】：

嘘。你刚刚拿了一个 1.5 年前写的答案，并在其中添加了代码 sn-p。

【解决方案7】：

对于 Firefox 使用：

 input:-moz-placeholder { color: #aaa; }
 textarea:-moz-placeholder { color: #aaa;}

对于所有其他浏览器（Chrome、IE、Safari），只需使用：

 .placeholder { color: #aaa; }

【讨论】：

.placeholder { color: #aaa; } 将改变文本的颜色而不是占位符 -1
这毫无意义@Deadpool。最初的问题是关于改变占位符文本的颜色，这个解决方案就是这样做的。
.placeholder 以 placeholder 类的元素为目标，例如class="placeholder" 所以.placeholder { color: #aaa; } 行将改变文本的颜色而不是占位符。
明白了。是的，你是对的。我过去确实实现了这一点，但我直接输入了这个（非）解决方案而没有对其进行测试。不错的@Deadpool。