使用 CSS 更改输入的 HTML5 占位符颜色在 Chrome 上不起作用答案

【问题标题】：Changing an input's HTML5 placeholder color with CSS does not work on Chrome使用 CSS 更改输入的 HTML5 占位符颜色在 Chrome 上不起作用
【发布时间】：2012-03-16 03:38:28
【问题描述】：

我尝试关注以下主题，但未成功。 Change an HTML5 input's placeholder color with CSS

我尝试为占位符着色，但它在 Chrome 17.0.963.56 m 上仍然保持灰色。

HTML

<input type='text' name='test' placeholder='colorize placeholder' value='' />

CSS

INPUT::-webkit-input-placeholder, 
INPUT:-moz-placeholder {
    color:red;
}
input[placeholder], [placeholder], *[placeholder]
{
    color:green !important;
}

JSfiddle

http://jsfiddle.net/F4xfV/1/

在 Firefox 10.0.2 上，它运行良好。

【问题讨论】：

如果您使用的是像 Bootstrap 这样的 CSS 框架，它们可能已经定义了这些样式，因此您必须添加 !important，或者确保所有内容都按预期层叠。
!important 为我解决了问题。没有它，占位符文本颜色仍然无法更改，即使其他字体属性可以更改。
Change an input's HTML5 placeholder color with CSS的可能重复
@fuxia，不是重复的，因为我从你引用的问题开始（我在我的问题中也引用了它），然后我遇到了问题，这就是我问这个问题的原因。跨度>

标签： css google-chrome placeholder

【解决方案1】：

您忘记了:。因此，整个选择器已损坏并且无法正常工作。 http://jsfiddle.net/a96f6/87/

编辑：好像（更新后？）这不再起作用了，试试这个：

input::-webkit-input-placeholder{
    color:red;
}
input:-moz-placeholder {
    color:red;
}

注意：不要混合供应商前缀选择器（-moz、-webkit、-ms、...）。例如，Chrome 不会理解“-moz-”，然后忽略整个选择器。

编辑澄清： 要使其适用于所有浏览器，请使用以下代码：

::-webkit-input-placeholder {
    color:red;
}

::-moz-placeholder {
    color:red;
}

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

【讨论】：

谢谢！你是对的。新规则是：input::-webkit-input-placeholder, input::-moz-placeholder { color:red; }
不是input:-moz-placeholder { color:red; }吗？这就是另一个线程中的内容。另外，不要将两个选择器放在一个规则中。
占位符颜色在我的 chrome 29.0.1547.57 中不是红色
css 代码仍然适用于我，但小提琴已经过时了。 jsfiddle.net/a96f6/87
“不要混合供应商前缀” - 这让我绊倒了好几个小时！

【解决方案2】：

正如@Alex 所说，由于某种原因，您不能为多个浏览器组合选择器。

这会起作用

::-webkit-input-placeholder {
    color:red;
}

::-moz-placeholder {
    color:red;
}

::-ms-placeholder {
    color:red;
}

::placeholder {
    color:red;
}

但这行不通（至少在 Chrome 中）：

::-webkit-input-placeholder,
::-moz-placeholder,
::-ms-placeholder,
::placeholder {
    color:red;
}

对我来说，这看起来像是一个浏览器实现的怪癖。

另外，请注意，您不必在全局范围内定义占位符样式，您仍然可以像往常一样定义 ::placeholder 选择器的范围。这有效：

.my-form .input-text::-webkit-input-placeholder {
    color:red;
}

.my-form .input-text::-moz-placeholder {
    color:red;
}

【讨论】：

感谢您提到什么不会起作用，这就是我搞砸的地方
有谁知道为什么第一种方法不起作用？我认为这只是非常常见的 css 语法。好困惑

【解决方案3】：

我刚刚遇到同样的问题，并认为它会很好分享。出于某种原因，firefox 上的颜色没有改变，我注意到它只有在我使用十六进制值时才发生，所以我对特定网站这样做了：

::-webkit-input-placeholder {
    color: #666666;
}

::-moz-placeholder {
    color: black;
}

::-ms-placeholder {
    color: #666666;
}

::placeholder {
    color: #666666;
}

【讨论】：

没有其他答案对我有用！这个占位符的东西很奇怪......不能结合供应商前缀选择器，不能使用命名颜色......
我注意到的是 firefox 会使您选择的颜色变亮。如果你选择红色，它看起来有点粉红色，而不是通常的红色。

【解决方案4】：

::-webkit-input-placeholder {
    color: #008000;
}

【讨论】：