使用CSS更改HTML5输入的占位符颜色

Question

使用CSS更改HTML5输入的占位符颜色

Chrome支持占位符属性的input[type=text]元素（别人可能做太多）。

但以下CSS内容对占位符的值没有任何作用：

input[placeholder], [placeholder], *[placeholder] {

    color: red !important;

}

<input type="text" placeholder="Value">

Value仍然会留下grey而不是red。

有没有办法改变占位符文本的颜色？

Answer 1

/* do not group these rules */*::-webkit-input-placeholder {&nbsp; &nbsp; color: red;}*:-moz-placeholder {&nbsp; &nbsp; /* FF 4-18 */&nbsp; &nbsp; color: red;&nbsp; &nbsp; opacity: 1;}*::-moz-placeholder {&nbsp; &nbsp; /* FF 19+ */&nbsp; &nbsp; color: red;&nbsp; &nbsp; opacity: 1;}*:-ms-input-placeholder {&nbsp; &nbsp; /* IE 10+ */&nbsp; &nbsp; color: red;}*::-ms-input-placeholder {&nbsp; &nbsp; /* Microsoft Edge */&nbsp; &nbsp; color: red;}*::placeholder {&nbsp; &nbsp; /* modern browser */&nbsp; &nbsp; color: red;}<input placeholder="hello"/> <br /><textarea placeholder="hello"></textarea>这将为所有input和textarea占位符设置样式。重要说明：请勿对这些规则进行分组。相反，为每个选择器创建一个单独的规则（组中的一个无效选择器使整个组无效）。

Answer 2

您可能还想要textareas样式：input::-webkit-input-placeholder,&nbsp;textarea::-webkit-input-placeholder&nbsp;{ &nbsp;&nbsp;color:&nbsp;#636363;}input:-moz-placeholder,&nbsp;textarea:-moz-placeholder&nbsp;{ &nbsp;&nbsp;color:&nbsp;#636363;}

Answer 3

对于Bootstrap和Less用户，有一个mixin .placeholder：//&nbsp;Placeholder&nbsp;text//&nbsp;-------------------------.placeholder(@color:&nbsp;@placeholderText)&nbsp;{ &nbsp;&nbsp;&:-moz-placeholder&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;@color; &nbsp;&nbsp;} &nbsp;&nbsp;&:-ms-input-placeholder&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;@color; &nbsp;&nbsp;} &nbsp;&nbsp;&::-webkit-input-placeholder&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;@color; &nbsp;&nbsp;}}