Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
在Firefox和Internet Explorer中,正常输入文本颜色覆盖占位符的颜色属性。所以,我们需要
::-webkit-input-placeholder {
color: red; text-overflow: ellipsis;
}
:-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
::-moz-placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* For the future */
:-ms-input-placeholder {
color: #acacac !important; text-overflow: ellipsis;
}
其他回答
尝试此css
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
color: #ddd;
}
这个怎么样
<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000';this.value=“”;“style=”颜色:#f00;" />
没有CSS或占位符,但您可以获得相同的功能。
Compass有一个开箱即用的混音器。
举个例子:
<input type="text" placeholder="Value">
在SCSS中使用指南针:
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
有关输入占位符mixin,请参阅文档。
试试这个吧
input::placeholder
color:#900009;
}
对于Bootstrap用户,如果您使用class=“form control”,则可能存在CSS特定性问题。您应该获得更高的优先级:
.form-control::-webkit-input-placeholder {
color: red;
}
//.. and other browsers
或者如果您使用的是Less:
.form-control{
.placeholder(red);
}