Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
我已经在我的移动平台上尝试了各种组合来改变颜色,最终是:
-webkit-text-fill-color: red;
这一招奏效了。
其他回答
我已经在我的移动平台上尝试了各种组合来改变颜色,最终是:
-webkit-text-fill-color: red;
这一招奏效了。
以下是CSS选择器的解决方案
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
WebKit、Blink(Safari、Google Chrome、Opera 15+)和Microsoft Edge使用了伪元素:::-webkit输入占位符。Mozilla Firefox 4到18使用了一个伪类::-moz占位符(一个冒号)。Mozilla Firefox 19+使用了一个伪元素:::-moz占位符,但旧选择器仍将工作一段时间。Internet Explorer 10和11正在使用伪类::-ms输入占位符。InternetExplorer9及更低版本根本不支持占位符属性,而Opera12及更低版本不支持任何占位符CSS选择器。
我只是意识到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中使用浏览器前缀来使它们相同,例如Firefox默认为占位符提供透明度,因此需要在CSS中添加不透明度1,加上颜色,这在大多数情况下不是一个大问题,但保持它们一致性很好:
*::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
color: #ccc;
opacity: 1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
opacity: 1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ccc;
}
<input type="text" class="input-control" placeholder="My Input">
在头部添加以下CSS。
<style type="text/css">
.input-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red !important;
opacity: 1; /* Firefox */
}
.input-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red !important;
}
.input-control::-ms-input-placeholder { /* Microsoft Edge */
color: red !important;
}
</style>
以下是参考链接。https://www.w3schools.com/howto/howto_css_placeholder.asp