更改输入'；带有CSS的HTML5占位符颜色在Chrome上不起作用

我试着遵循下面的主题，但没有成功。

我试图给我的占位符上色，但在Chrome 17.0.963.56 m上它仍然是灰色的

HTML

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

JSfiddle

---

在Firefox10.0.2上，它运行良好。

您忘记了一个

：

。

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

因此，整个选择器都损坏了，无法工作。

编辑： 似乎（更新后？）这不再有效，请尝试以下操作：

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;
}

---

​

正如@Alex所说，由于某些原因，您无法为多个浏览器组合选择器

此将起作用

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

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

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

::placeholder {
    color:red;
}

但是这个不起作用（至少在Chrome中是这样）：

在我看来，这是一个浏览器实现的怪癖

另外，请注意，您不必全局定义占位符样式，您仍然可以像通常一样确定

：：placeholder

选择器的范围。这项工作：

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

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

---

我刚刚经历了同样的问题，我想分享一下会很好。 出于某种原因，firefox上的颜色没有改变，我注意到只有当我使用十六进制值时颜色才会改变，所以我对某个特定网站采用了这种方式：

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

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

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

::placeholder {
    color: #666666;
}

---

谢谢你是对的。新规则是：

input:：-webkit输入占位符，input:-moz占位符{color:red；}

这不是

input:-moz占位符{color:red；}

吗？这就是另一个线程中的内容。另外，不要将两个选择器放在一个规则中。占位符颜色在我的chrome 29.0.1547.57css代码中不是红色的，但小提琴已经过时了。“不要混淆供应商前缀”-这让我困惑了好几个小时！如果您使用的是像Bootstrap这样的CSS框架，它们可能已经定义了这些样式，因此您必须添加

！重要信息

，或者确保所有内容都按预期进行级联。

！重要提示

为我做了这件事。如果没有这些，占位符文本颜色仍然令人沮丧地无法更改，即使其他字体属性也可以更改。可能是@fuxia的重复，而不是重复，因为我是从您引用的问题开始的（我在问题中也引用了它），然后我遇到了问题，这就是我问这个问题的原因。谢谢你提到什么不起作用，这就是我搞砸的地方。有人知道为什么第一种方法不起作用吗？我认为这是非常常见的css语法。如此困惑，没有其他答案对我有效！这个占位符很奇怪。。。无法组合供应商前缀选择器，无法使用命名颜色…我注意到firefox会使您选择的颜色变浅。如果你选择红色，它看起来有点粉红色，而不是通常的大红。

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

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

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

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

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

::placeholder {
    color: #666666;
}