Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
对于Sass用户：
// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
其他回答
试试这个
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
针对不同的输入元素尝试此代码
your css selector::-webkit-input-placeholder { /*for webkit */
color:#909090;
opacity:1;
}
your css selector:-moz-placeholder { /*for mozilla */
color:#909090;
opacity:1;
}
your css selector:-ms-input-placeholder { /*for for internet exprolar */
color:#909090;
opacity:1;
}
示例1：
input[type="text"]::-webkit-input-placeholder { /*for webkit */
color: red;
opacity:1;
}
input[type="text"]:-moz-placeholder { /*for mozilla */
color: red;
opacity:1;
}
input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */
color: red;
opacity:1;
}
示例2：
input[type="email"]::-webkit-input-placeholder { /*for webkit */
color: gray;
opacity:1;
}
input[type="email"]:-moz-placeholder { /*for mozilla */
color: gray;
opacity:1;
}
input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */
color: gray;
}
<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>
除了toscho的回答，我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致，值得注意。
具体来说，Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。
这里是完整的跨浏览器比较。
我认为这段代码会起作用，因为占位符仅用于输入类型文本。因此，这一行CSS将足以满足您的需要：
input[type="text"]::-webkit-input-placeholder {
color: red;
}
