Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
：：占位符{颜色：红色；}<input-type=“text”placeholder=“Value”>
其他回答
<style>
::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
} /* firefox 22+ */
:-ms-input-placeholder {
color:red;
} /* ie10,11 */
input:-moz-placeholder {
color:red;
}
</style>
尝试这将有助于您，这将在您最喜欢的浏览器中工作：
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder {
/* Firefox 19+ */
color: pink;
}
:-moz-placeholder {
/* Firefox 18- */
color: pink;
}
我不记得我在哪里找到了这个代码片段（它不是我写的，不记得我是在哪里找到的，也不记得是谁写的）。
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
只需加载此JavaScript代码，然后通过调用以下规则使用CSS编辑占位符：
form .placeholder {
color: #222;
font-size: 25px;
/* etc. */
}
跨浏览器解决方案：
/* 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
以下是CSS选择器的解决方案
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
WebKit、Blink（Safari、Google Chrome、Opera 15+）和Microsoft Edge使用了伪元素：：：-webkit输入占位符。Mozilla Firefox 4到18使用了一个伪类：：-moz占位符（一个冒号）。Mozilla Firefox 19+使用了一个伪元素：：：-moz占位符，但旧选择器仍将工作一段时间。Internet Explorer 10和11正在使用伪类：：-ms输入占位符。InternetExplorer9及更低版本根本不支持占位符属性，而Opera12及更低版本不支持任何占位符CSS选择器。
