【问题标题】：Placeholder CSS not being applied in IE 11占位符 CSS 未在 IE 11 中应用
【发布时间】：2014-04-07 14:05:48
【问题描述】：

我在应用占位符 css 时遇到了一些问题。

我正在尝试使用伪类选择器 :-ms-input-placeholder 在输入框占位符上应用 css（即 color:#898F9C;），但它在 IE 中不起作用。

经过一番尝试后，我的问题得到了解决，但这太棒了。

如果我删除了输入框上的默认 css/样式颜色，占位符 css 在 IE 中正常工作（这是 Internet Explorer 的惊人行为）。

我的默认css/样式：

#search
{
    color:blue;
}

Working-fiddle without input-box default css

我的问题是，为什么它不能在 IE 中使用默认 CSS？

【问题讨论】：

overriding placeholder font css in all browsers的可能重复

标签： internet-explorer placeholder internet-explorer-11 pseudo-class

【解决方案1】：

一般来说，在设置占位符样式时

当遇到不受支持的供应商前缀时，CSS 解析引擎将认为整个规则无效，这就是为什么需要为每个供应商前缀单独的规则集。此外，我发现 IE11 需要 !important 标志来覆盖默认的用户代理样式：

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

似乎只有 IE11 需要 !important 标志。

Check browser support at CanIUse

针对您特定问题的解决方案

在您的示例中，您需要这些 IE11 规则集：

#search:-ms-input-placeholder {
    color: #898F9C !important; /* IE11 needs the !important flag */
}

/* (...) Other vendor prefixed rulesets omitted for brevity */

#search::placeholder {
    color: #898F9C;
}

【讨论】：

还有别的吗？即使使用这些设置，我也无法在 IE 11 中显示占位符。它适用于所有其他浏览器。我讨厌 IE，更讨厌大家都用它。
哦 - 它与文档模式有关。如果我将文档模式更改为 10 并返回到边缘，那么它可以工作。我讨厌文档模式。
那记得加<meta http-equiv="X-UA-Compatible" content="IE=edge" />到<head>。此外，使用 HTML 5 文档类型，即<!DOCTYPE html>。
@LarsGyrupBrinkNielsen !important 解决了 IE11 中的问题 :) 谢谢
了解 !important 对 IE11 的需求为我解决了一个问题。

【解决方案2】：

除Raj answered 之外，在使用供应商前缀时，选择器需要为每个前缀分成自己的规则集。

这样做的原因是为了让 CSS 语言能够进步，浏览器需要丢弃他们不理解的选择器或声明。这允许添加新功能，而不必担心旧浏览器会以不同的方式解释它，而不仅仅是删除它。

当使用逗号组合器来组合各种伪类时，你把它变成一个选择器，浏览器需要理解整个事情来应用那个规则集。

相反，您应该为每个供应商前缀的伪类/元素创建一个新规则集。不幸的是，它有很多重复，但这就是使用实验性 CSS 的代价。

【讨论】：

虽然 Stackoverflow 业力会因此惩罚你，但这确实应该是对 Raj 答案的编辑，而不是单独的答案。

【解决方案3】：

定义需要分开。

例如：

#search
{
    color:blue;
}

#search::-webkit-input-placeholder {
   color: red;
}

#search:-moz-placeholder {
   color: red;
}

#search::-moz-p {
   color: red;
}

#search:-ms-input-placeholder {
   color: red;
}

请看这里：http://jsfiddle.net/DLGFK/203/

【讨论】：

嗨 Raj Parmar，它不适用于 Internet Explorer 9。是否有任何改变可以让它在 IE 9 上运行。
@Manju - Internet Explorer 9 及更低版本根本不支持 HTML5 placeholder 属性 - 因此，不会看到占位符文本，当然也无法设置样式。
太糟糕了。在那里设置不透明度会影响整个元素。解决方案是 color: transparent (or argb)
@Tom，谁在谈论不透明度？
@RajParmar 没人。您的解决方案工作得很好。但我希望它适用于不透明度而不是颜色：红色：p

【解决方案4】：

如果有人因为无法更改 font-size 而来到这里 - 目前 IE 和 Edje 不支持占位符的 font-size。他们似乎不会很快修复它。 Issue #11342294

【讨论】：

【解决方案5】：

我建议使用Autoprefixer 来生成正确的输出

输入

input::placeholder {
    color: red;
}

输出

input::-webkit-input-placeholder {
    color: red;
}
input::-moz-placeholder {
    color: red;
}
input:-ms-input-placeholder {
    color: red;
}
input::-ms-input-placeholder {
    color: red;
}
input::placeholder {
    color: red;
}

【讨论】：