Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
您可以使用CSS更改HTML5输入的占位符颜色。如果碰巧,您的CSS冲突,此代码注释正常工作,您可以像下面这样使用(!important)。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#909 !important;
opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#909 !important;
opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:#909 !important;
}
<input placeholder="Stack Snippets are awesome!">
希望这会有所帮助。
其他回答
尝试这将有助于您,这将在您最喜欢的浏览器中工作:
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder {
/* Firefox 19+ */
color: pink;
}
:-moz-placeholder {
/* Firefox 18- */
color: pink;
}
除了toscho的回答,我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致,值得注意。
具体来说,Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。
这里是完整的跨浏览器比较。
对于Bootstrap用户,如果您使用class=“form control”,则可能存在CSS特定性问题。您应该获得更高的优先级:
.form-control::-webkit-input-placeholder {
color: red;
}
//.. and other browsers
或者如果您使用的是Less:
.form-control{
.placeholder(red);
}
针对不同的输入元素尝试此代码
your css selector::-webkit-input-placeholder { /*for webkit */
color:#909090;
opacity:1;
}
your css selector:-moz-placeholder { /*for mozilla */
color:#909090;
opacity:1;
}
your css selector:-ms-input-placeholder { /*for for internet exprolar */
color:#909090;
opacity:1;
}
示例1:
input[type="text"]::-webkit-input-placeholder { /*for webkit */
color: red;
opacity:1;
}
input[type="text"]:-moz-placeholder { /*for mozilla */
color: red;
opacity:1;
}
input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */
color: red;
opacity:1;
}
示例2:
input[type="email"]::-webkit-input-placeholder { /*for webkit */
color: gray;
opacity:1;
}
input[type="email"]:-moz-placeholder { /*for mozilla */
color: gray;
opacity:1;
}
input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */
color: gray;
}
在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;
}