Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
在html文件中：
<input type="text" placeholder="placeholder" class="redPlaceHolder">
在css文件中：
.redPlaceHolder{
color: #ff0000;
}
其他回答
这会很好的。此处演示：
input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#666；}输入：-moz占位符，文本区域：-moz占位符{颜色：#666；}input:：-moz占位符，文本区域：：-moz占位符{颜色：#666；}input：-ms输入占位符，文本区域：-ms输入占位符{颜色：#666；}<input type=“text”placeholder=“Value”/>
<input type="text" class="input-control" placeholder="My Input">
在头部添加以下CSS。
<style type="text/css">
.input-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red !important;
opacity: 1; /* Firefox */
}
.input-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red !important;
}
.input-control::-ms-input-placeholder { /* Microsoft Edge */
color: red !important;
}
</style>
以下是参考链接。https://www.w3schools.com/howto/howto_css_placeholder.asp
在Firefox和Internet Explorer中，正常输入文本颜色覆盖占位符的颜色属性。所以，我们需要
::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* For the future */
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
最简单的方法是：
#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
您还可以设置文本区域的样式：
input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#FF9900；}输入：-moz占位符，文本区域：-moz占位符{颜色：#FF9900；}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好！”></text区域>
