Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。
但以下CSS对占位符的值没有任何作用：
输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色？
当前回答
您可以将其用于输入和焦点样式：
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+ */
其他回答
对于使用Bourbon的SASS/SCSS用户，它具有内置功能。
//main.scss
@import 'bourbon';
input {
width: 300px;
@include placeholder {
color: red;
}
}
CSS输出，您也可以抓取这部分并粘贴到代码中。
//main.css
input {
width: 300px;
}
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
对于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;
}
我已经在我的移动平台上尝试了各种组合来改变颜色，最终是：
-webkit-text-fill-color: red;
这一招奏效了。
CSS提供：：占位符伪元素。
请注意，Bootstrap中的.placeholder mixin已被弃用。
例子：
input::placeholder { color: black; }
当使用autorefixer时，以上代码将被转换为适用于所有浏览器的正确代码。
