[英]How to set input text color, but not placeholder color, in IE11
如何在不影响Internet Explorer 11中placeholder
字体颜色的情况下更改input
文本框的字体颜色?
如果我改变输入中的字体颜色( 小提琴 ):
HTML :
<div class="buttonToolbar">
<input type="text" placeholder="e.g. Stackoverflow"><br>
</div>
CSS :
.buttonToolbar input {
color: Blue;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
font-style: italic;
color: GrayText;
}
::-webkit-input-placeholder { /* WebKit browsers */
font-style: italic;
color: GrayText;
}
占位符文本不再是Internet Explorer 11中的默认灰色颜色:
但它确实在Chrome 35中显示:
如果我没有设置input
框的样式,则输入框不会被设置样式。 更改:
.buttonToolbar input {
color: Blue;
}
至
.buttonToolbar {
color: Blue;
}
意味着占位符文本现在可以执行以下操作:
但现在文字颜色没有做它应该做的事情:
我需要的是弄清楚如何使用CSS更改输入的HTML5占位符颜色。
我对此很陌生,这个答案可能只是一个快速修复...但是如果你在GrayText之后添加!重要,那么它似乎可以工作(至少在IE 10中)。
color: GrayText !important;
这是小提琴http://jsfiddle.net/uc2Rj/
如果您不想使用!重要,这至少可以帮助您找到解决问题的正确方向。 它可能是关于伪元素和类的优先级的事情。( 为什么我不能覆盖现有的伪元素? )
您的占位符选择器需要更具体,如下所示。
.buttonToolbar input {
color: Blue;
}
.buttonToolbar input:-ms-input-placeholder { /* Internet Explorer 10+ */
font-style: italic;
color: GrayText;
}
.buttonToolbar input::-webkit-input-placeholder { /* WebKit browsers */
font-style: italic;
color: GrayText;
}
有三种不同的实现:伪元素,伪类和什么都没有。
WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder.
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
Internet Explorer 10和11使用伪类:: -ms-input-placeholder。 2017年4月:大多数现代浏览器支持简单的伪元素::占位符Internet Explorer 9,而lower不支持占位符属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。
关于最佳实施的讨论仍在继续。 请注意,伪元素就像Shadow DOM中的真实元素一样。 输入上的填充将不会获得与伪元素相同的背景颜色。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.