Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
此代码将使用::占位符选择器更改占位符的颜色。
::-webkit-input-placeholder {
/* Edge */
color: red;
}
:-ms-input-placeholder {
/* Internet Explorer */
color: red;
}
::placeholder {
color: red;
}
其他回答
这个简短而干净的代码:
::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
最简单的方法是:
#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
在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;
}
HTML的一部分:
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
我将展示如何通过CSS更改“Enter sentence”表达式的颜色:
::placeholder{
color:blue;
}
我只是意识到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,这样就很好了。