internet-explorer - 占位符 CSS 未在 IE 11 中应用

Question

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

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

Demo

经过一番尝试，我的问题得到了解决，但这真是太神奇了。

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

我的默认CSS/样式:

#search
{
    color:blue;
}

Working-fiddle without input-box default css

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

Answer 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;
}