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,这样就很好了。
其他回答
这个怎么样
<input type=“text”value=“placeholder text”onfocus=“this.style.color='#000';this.value=“”;“style=”颜色:#f00;" />
没有CSS或占位符,但您可以获得相同的功能。
如果您正在使用Bootstrap,但无法使其工作,那么您可能错过了Bootstrap本身添加这些选择器的事实。这是我们正在讨论的Bootstrap v3.3。
如果您试图更改.form控件CSS类中的占位符,则应按如下方式重写它:
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #777;
opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #777;
opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #777;
}
HTML的一部分:
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
我将展示如何通过CSS更改“Enter sentence”表达式的颜色:
::placeholder{
color:blue;
}
不同浏览器中特定元素的占位符颜色。
HTML
<input class='contact' type="email" placeholder="majed@firefly.com">
CSS
.contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
.contact::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
.contact:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
.contact:-moz-placeholder { /* Firefox 18- */
color: pink;
}
我认为这段代码会起作用,因为占位符仅用于输入类型文本。因此,这一行CSS将足以满足您的需要:
input[type="text"]::-webkit-input-placeholder {
color: red;
}