Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
不同浏览器中特定元素的占位符颜色。
HTML
<input class='contact' type="email" placeholder="majed@firefly.com">
CSS
.contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
.contact::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
.contact:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
.contact:-moz-placeholder { /* Firefox 18- */
color: pink;
}
其他回答
我认为这段代码会起作用，因为占位符仅用于输入类型文本。因此，这一行CSS将足以满足您的需要：
input[type="text"]::-webkit-input-placeholder {
color: red;
}
/*不要将这些规则分组*/*：：-webkit输入占位符{颜色：红色；}*：-moz占位符{/*第4-18页*/颜色：红色；不透明度：1；}*：：-moz占位符{/*FF 19以上*/颜色：红色；不透明度：1；}*：-ms输入占位符{/*即10+*/颜色：红色；}*：：-ms输入占位符{/*Microsoft边缘*/颜色：红色；}*：：占位符{/*现代浏览器*/颜色：红色；}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>
这将设置所有输入和文本区域占位符的样式。
重要提示：不要将这些规则分组。相反，为每个选择器制定一个单独的规则（组中的一个无效选择器将使整个组无效）。
您还可以设置文本区域的样式：
input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#FF9900；}输入：-moz占位符，文本区域：-moz占位符{颜色：#FF9900；}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好！”></text区域>
输入：：占位符｛color:red；｝<input-type=“text”placeholder=“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
