占位符CSS未在IE 11中应用

Question

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

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

演示

经过一番打击和尝试后,我得到了解决问题的方法,但这太棒了.

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

我的默认css/style:

#search
{
    color:blue;
}

没有输入框默认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标志.

检查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所回答的问题之后,当使用供应商前缀时,需要将选择器分成每个前缀的自己的规则集.

这样做的原因是为了使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/