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

Question

我尝试遵循以下主题，但没有成功。 使用 CSS 更改 HTML5 输入的占位符颜色

我尝试对占位符进行着色，但它在 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 上运行良好。

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

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

Answer 3

我刚刚遇到了同样的问题，觉得分享一下会很好。 由于某种原因，颜色在 Firefox 上没有改变，我注意到只有当我使用十六进制值时才会改变颜色，所以我对特定网站这样做了：

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

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

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

::placeholder {
    color: #666666;
}

Answer 4

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