Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
跨浏览器解决方案：
/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
资料来源：David Walsh
其他回答
我只是意识到Mozilla Firefox 19+浏览器为占位符提供了一个不透明度值，因此颜色不会是您真正想要的。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #eee; opacity:1;
}
我将不透明度覆盖为1，这样就很好了。
在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;
}
您还可以设置文本区域的样式：
input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#FF9900；}输入：-moz占位符，文本区域：-moz占位符{颜色：#FF9900；}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好！”></text区域>
您可以使用CSS更改HTML5输入的占位符颜色。如果碰巧，您的CSS冲突，此代码注释正常工作，您可以像下面这样使用（！important）。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#909 !important;
opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#909 !important;
opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:#909 !important;
}
<input placeholder="Stack Snippets are awesome!">
希望这会有所帮助。
您可以将其用于输入和焦点样式：
input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */