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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32096102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 18:06:11  来源:igfitidea点击:

On Edge Browser, how to change input placeholder text color using CSS?

htmlcssplaceholdermicrosoft-edge

提问by Muthu Kumaran

On Edge Browser, I couldn't able to change input placeholder color.

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

:-ms-input-placeholderis not working but works fine on IE 10& IE 11.

:-ms-input-placeholder不工作,但在IE 10&上工作正常IE 11

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

is there anyway to make it work using CSS?

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

回答by Paulie_D

From CanIUse.com

来自CanIUse.com

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

:-ms-input-placeholder for IE.

::-ms-input-placeholder for Edge (also supports webkit prefix)

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

:-ms-input-placeholder for IE。

::-ms-input-placeholder for Edge(也支持 webkit 前缀)

Note the double colon syntax

注意双冒号语法

回答by David Walton

I want to second @ken's comment on @Paulie_D's answer, above.

我想第二个@ken 对@Paulie_D 的回答的评论,上面。

This works: input[type="text"]::-ms-input-placeholder { color: #000; }

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

This doesn't: input[type="text"]::placeholder, input[type="text"]::-ms-input-placeholder { color: #000; }

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

I'm not sure why, but it definitely appears that the -ms-input-placeholder pseudo-element only works if it's separate from other directives.

我不确定为什么,但似乎 -ms-input-placeholder 伪元素只有在与其他指令分开时才有效。

回答by Stanislav Ostapenko

For the current version of the Microsoft Edge browser, placeholder doesn't work correctly. Take a look this issue Microsoft Edge placeholder bug. If placeholder is invisible, try to remove position: relativeand :-webkit-input-placeholderopacity.

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