在 Edge 浏览器上，如何使用 CSS 更改输入占位符文本颜色？

Posted 2023-03-05

【中文标题】在 Edge 浏览器上，如何使用 CSS 更改输入占位符文本颜色？

【英文标题】：On Edge Browser, how to change input placeholder text color using CSS?

【发布时间】：2015-11-12 18:55:28

【问题描述】：

在 Edge 浏览器上，我无法更改输入占位符颜色。

:-ms-input-placeholder 不工作，但在 IE 10 和 IE 11 上工作正常。

input:-ms-input-placeholder 
    font-style:italic;        
    color: red;
    background-color: yellow;

有没有办法使用 CSS 让它工作？

【问题讨论】：

你尝试过-webkit 版本吗？我认为这可能是 IE-Edge 的后备方案？

是的，我试过了。没用。

【参考方案1】：

来自CanIUse.com

::-webkit-input-placeholder for (Chrome/Safari/Opera)

:-ms-input-placeholder 用于 IE。

::-ms-input-placeholder 用于 Edge（也支持 webkit 前缀）

注意双冒号语法

【讨论】：

双冒号有效。啊...我错过了尝试。谢谢！

就我而言，它最终使用 input::-ms-input-placeholdercolor: myColor; 在边缘工作。但它没有 input::-ms-input-placeholder, input:-ms-input-placeholdercolor:myColor;

【参考方案2】：

我想第二次@ken 对上面@Paulie_D 的回答发表评论。

这有效： input[type="text"]::-ms-input-placeholder color: #000;

这不会： input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder color: #000;

我不知道为什么，但显然 -ms-input-placeholder 伪元素只有在与其他指令分开时才有效。

【讨论】：

Edge 不认为 ::placeholder 是一个有效的 CSS 并丢弃整个规则。因此，即使您将有效的类放在那里说.text-white, input[type="text"]::placeholder，.text-white 也不会对 Edge 应用任何规则，而适用于所有其他浏览器。这可能会破坏 Edge 中的网站。

这很有趣-感谢您的澄清。这也是 IE

大多数浏览器都是这样操作的。见：Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

【参考方案3】：

对于当前版本的 Microsoft Edge 浏览器，占位符无法正常工作。看看这个问题Microsoft Edge placeholder bug。如果占位符不可见，请尝试删除 position: relative 和 :-webkit-input-placeholder 不透明度。

【讨论】：

疯狂的错误...仍然存在

transform: scale(1) 输入本身对我来说效果更好。占位符像魔术一样重新出现......