Internet Explorer 占位符样式问题

Posted 2023-03-05

【中文标题】Internet Explorer 占位符样式问题

【英文标题】：Internet Explorer placeholder styling issue

【发布时间】：2014-11-24 00:26:09

【问题描述】：

尝试将样式应用于占位符我遇到了一个问题，即在 IE（所有版本）中占位符文本颜色不适用。只取文本输入的颜色

:-ms-input-placeholder   
    color: white; 


input 
    color:black;

应用此代码后，占位符的颜色将为黑色。

可能是什么问题？

【参考方案1】：

您需要为特定输入指定此规则：

input:-ms-input-placeholder   
    color: white; 


input 
    color:black;

来自Internet Explorer Dev Center：

选择器：-ms-input-placeholder ...

请注意，这仅适用于 IE>10 浏览器。

【讨论】：

您确定没有启用兼容模式并且您的浏览器不能在 Quirks 模式下工作吗？你的页面上有 doctype 吗？

是的 - 我确定。 Doctype也在我的html中

你有一些页面示例吗？这个链接对你有用吗？ jsfiddle.net/ct0Lx3t3 。此外，如果您使用 3rd 方插件为不受支持的浏览器添加占位符，您是否可以禁用它们并查看它们是否导致了问题？

删除所有 js 添加并留下 css - 不起作用。在 jsFiddle 中它工作正常。奇怪的是，我的 css 用于输入元素。

@eatmypants 这很奇怪，在另一个地方似乎有问题。你有活生生的例子吗？

【参考方案2】：

如果您正在寻找对所有浏览器的支持，请查看以下答案：

How to support placeholder attribute in IE8 and 9

【讨论】：

OP 寻找样式占位符，而不是在旧浏览器中启用它。此外，仅链接的答案应该是 cmets 而不是 meta.stackexchange.com/questions/8231/…

已经在用了，但是我加了之后- IE

或标记为重复

【参考方案3】：

解决方案：

在我的 css 中，我为表单输入 (div_name form > input ) 指定了文本的颜色，这对于浏览器来说是比指定为选择器更有价值的参数：-ms-input-placeholder 占位符颜色。 （这很奇怪。它们用于不同的目的，但没关系）

【参考方案4】：

IE11 需要 !important 标志来覆盖默认的用户代理样式。

这是适用于 IE 版本 10 和 11 的规则集。

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder 
    color: white !important;

有关所有浏览器的详细信息，请参阅问题Placeholder CSS not being applied in IE 11 的答案。

对于早于 10 的 IE 版本，您需要一个 polyfill 来支持占位符。这些 CSS 会有所不同。参考 polyfill。