Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
试试这个吧
input::placeholder
color:#900009;
}
其他回答
我只是意识到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,这样就很好了。
CSS提供::占位符伪元素。
请注意,Bootstrap中的.placeholder mixin已被弃用。
例子:
input::placeholder { color: black; }
当使用autorefixer时,以上代码将被转换为适用于所有浏览器的正确代码。
此代码将使用::占位符选择器更改占位符的颜色。
::-webkit-input-placeholder {
/* Edge */
color: red;
}
:-ms-input-placeholder {
/* Internet Explorer */
color: red;
}
::placeholder {
color: 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;
}
实施
有三种不同的实现:伪元素、伪类和无。
WebKit、Blink(Safari、Google Chrome、Opera 15+)和Microsoft Edge使用伪元素:::-WebKit输入占位符。[参考]Mozilla Firefox 4到18使用了伪类::-moz占位符(一个冒号)。[参考]Mozilla Firefox 19+使用了伪元素:::-moz占位符,但旧的选择器仍将工作一段时间。[参考]Internet Explorer 10和11使用伪类::-ms输入占位符。[参考]2017年4月:大多数现代浏览器支持简单的伪元素::placeholder[Ref]
InternetExplorer9及更低版本根本不支持占位符属性,而Opera12及更低版本不支持任何占位符CSS选择器。
关于最佳实现的讨论仍在继续。请注意,伪元素的行为与ShadowDOM中的真实元素类似。输入上的填充不会获得与伪元素相同的背景色。
CSS选择器
用户代理需要忽略具有未知选择器的规则。请参见选择器级别3:
包含无效选择器的选择器组无效。
因此,我们需要为每个浏览器制定单独的规则。否则,所有浏览器都会忽略整个组。::-webkit输入占位符{/*webkit,Blink,Edge*/颜色:#909;}:-moz占位符{/*Mozilla Firefox 4到18*/颜色:#909;不透明度:1;}::-moz占位符{/*Mozilla Firefox 19+*/颜色:#909;不透明度:1;}:-ms输入占位符{/*Internet Explorer 10-11*/颜色:#909;}::-ms输入占位符{/*Microsoft Edge*/颜色:#909;}::占位符{/*大多数现代浏览器现在都支持此功能*/颜色:#909;}<input placeholder=“堆栈代码段太棒了!”>
使用说明
小心避免形成不良对比。Firefox的占位符似乎默认为不透明度降低,因此需要使用不透明度:1。请注意,如果占位符文本不适合,它会被截断——在em中调整输入元素的大小,并使用最大最小字体大小设置测试它们。别忘了翻译:有些语言需要更多的空间来容纳同一个单词。对于支持HTML占位符但不支持CSS占位符的浏览器(如Opera)也应该进行测试。占位符不能替代标签,因此请确保您也有标签某些浏览器对某些输入类型(电子邮件、搜索)使用额外的默认CSS。这些可能会以意想不到的方式影响渲染。使用财产-webkit-appearance和-moz-appearance进行更改。例子:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}