Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
我只是意识到Mozilla Firefox 19+浏览器为占位符提供了一个不透明度值,因此颜色不会是您真正想要的。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #eee; opacity:1;
}
我将不透明度覆盖为1,这样就很好了。
其他回答
/*不要将这些规则分组*/*::-webkit输入占位符{颜色:红色;}*:-moz占位符{/*第4-18页*/颜色:红色;不透明度:1;}*::-moz占位符{/*FF 19以上*/颜色:红色;不透明度:1;}*:-ms输入占位符{/*即10+*/颜色:红色;}*::-ms输入占位符{/*Microsoft边缘*/颜色:红色;}*::占位符{/*现代浏览器*/颜色:红色;}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>
这将设置所有输入和文本区域占位符的样式。
重要提示:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(组中的一个无效选择器将使整个组无效)。
您可以将其用于输入和焦点样式:
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+ */
您还可以设置文本区域的样式:
input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>
Compass有一个开箱即用的混音器。
举个例子:
<input type="text" placeholder="Value">
在SCSS中使用指南针:
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
有关输入占位符mixin,请参阅文档。
此代码将使用::占位符选择器更改占位符的颜色。
::-webkit-input-placeholder {
/* Edge */
color: red;
}
:-ms-input-placeholder {
/* Internet Explorer */
color: red;
}
::placeholder {
color: red;
}