通常，在设置占位符

Question

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

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

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

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

我的默认css / style：

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

Answer 2

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

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

使用逗号组合器组合各种伪类时，将其转换为一个选择器，浏览器需要了解整个事物以应用该规则集。

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

Answer 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/

Answer 4

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

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

占位符CSS未在IE 11中应用

5 个答案:

通常，在设置占位符

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