Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
这里还有一个例子:
.form控件::-webkit输入占位符{颜色:红色;宽度:250px;}h1小时{颜色:红色;}<div class=“col-sm-4”><input class=“form control”placeholder=“在此处输入文本..”ng model=“需要电子邮件”/></div>
其他回答
试试这个吧
input::placeholder
color:#900009;
}
/*不要将这些规则分组*/*::-webkit输入占位符{颜色:红色;}*:-moz占位符{/*第4-18页*/颜色:红色;不透明度:1;}*::-moz占位符{/*FF 19以上*/颜色:红色;不透明度:1;}*:-ms输入占位符{/*即10+*/颜色:红色;}*::-ms输入占位符{/*Microsoft边缘*/颜色:红色;}*::占位符{/*现代浏览器*/颜色:红色;}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>
这将设置所有输入和文本区域占位符的样式。
重要提示:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(组中的一个无效选择器将使整个组无效)。
试试这个
::-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;
}
对于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);
}
在html文件中:
<input type="text" placeholder="placeholder" class="redPlaceHolder">
在css文件中:
.redPlaceHolder{
color: #ff0000;
}