占位符CSS在IE 11中未应用

Question

占位符CSS在IE 11中未应用

internet-explorerplaceholderinternet-explorer-11pseudo-class

45

我在应用占位符CSS方面遇到了一些问题。

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

演示

经过一些试验，我找到了解决问题的方法，但它真是神奇。

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

我的默认CSS /样式：

#search
{
    color:blue;
}

没有输入框默认CSS的工作示例

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

- Ishan Jain

可能是在所有浏览器中覆盖占位符字体CSS的重复问题。 - Ram

5个回答

28

根据Raj的回答，使用供应商前缀时，选择器需要分别写入各自相应的规则集中。

这样做的原因是为了使CSS语言不断进步，浏览器需要放弃它们不理解的选择器或声明。这样就可以添加新功能而不用担心旧浏览器会以与其它方式不同的方式进行解释。

当使用逗号组合器来组合各种伪类时，你将其转换为一个选择器，浏览器需要完全理解此选择器才能应用该规则集。

相反，你应该为每个供应商前缀的伪类/元素创建新的规则集。不幸的是，这样做会产生大量重复冗余，但这是使用试验性CSS的代价。

- David Storey

2

虽然 Stackoverflow 的声望会因此而受到惩罚，但这确实应该是对 Raj 回答的编辑，而不是一个单独的回答。 - Chris Moschini

23

定义需要分开。

例如：

#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

嗨，Raj Parmar，它在Internet Explorer 9上无法工作。有什么需要更改才能在ie 9上运行吗？ - Manju

1

@Manju - 因为Internet Explorer 9及以下版本完全不支持HTML5的placeholder属性，所以占位文本将无法显示，当然也无法进行样式设置。 - mnsth

糟糕。在那里设置不透明度会影响整个元素。解决方法是使用颜色：透明（或ARGB）。 - Tom

@Tom，谁在谈论不透明度？ - Raj Parmar

@RajParmar 没问题。你的解决方案很好。但是我想让它透明而不是红色:p。 - Tom

2

如果有人因为无法更改font-size而来到这里 - 目前IE和Edje不支持占位符的font-size。看起来他们不打算尽快修复它。问题#11342294

- Jonathan Applebaum

0

我建议使用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;
}

- sidonaldson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Gyrup Brink Nielsen · Accepted Answer

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

当遇到不支持的供应商前缀时，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;
}