Html 如何设置“占位符”文本的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5839270/
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
How to set the color of "placeholder" text?
提问by Misha Moroshko
Is that possible to set the color of placeholdertext ?
可以设置placeholder文字的颜色吗？
<textarea placeholder="Write your message here..."></textarea>
采纳答案by Vassi
Nobody likes the "refer to this answer" answers, but in this case it may help: Change an HTML5 input's placeholder color with CSS
没有人喜欢“参考这个答案”的答案，但在这种情况下它可能会有所帮助：Change an HTML5 input's placeholder color with CSS
Since it's only supported by a couple of browsers, you can try the jQuery placeholder plugin (assuming you can\are using jQuery). It allows you to style the placeholder text via CSS since it's really only a swap trick it does with focus events.
由于它仅被几个浏览器支持，您可以尝试使用 jQuery 占位符插件（假设您可以\正在使用 jQuery）。它允许您通过 CSS 设置占位符文本的样式，因为它实际上只是对焦点事件所做的交换技巧。
The plugin does not activate on browsers that support it, though, so you can have CSS that targets chrome\firefox and the jQuery plugin's CSS to catch the rest.
但是，该插件不会在支持它的浏览器上激活，因此您可以使用针对 chrome\firefox 的 CSS 和 jQuery 插件的 CSS 来捕捉其余部分。
The plugin can be found here: https://github.com/mathiasbynens/jquery-placeholder
该插件可以在这里找到：https: //github.com/mathiasbynens/jquery-placeholder
回答by HasanAboShally
::-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;
}
回答by Suresh Pattu
Try this
尝试这个
textarea::-webkit-input-placeholder { color: #999;}
回答by daraptoor
For giving placeholder a color just use these lines of code:
要为占位符指定颜色，只需使用以下代码行：
::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; }
:-o-input-placeholder { color: red; }
回答by Ankit Pundhir
#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.
回答by Altynbek S.
Try 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;
}<input type="text" placeholder="Value" />回答by skidadon
For Firefox use:
对于 Firefox 使用：
input:-moz-placeholder { color: #aaa; }
textarea:-moz-placeholder { color: #aaa;}
For all other browsers (Chrome, IE, Safari), just use:
对于所有其他浏览器（Chrome、IE、Safari），只需使用：
.placeholder { color: #aaa; }
