Question

我尝试按照以下主题进行操作，但未成功。 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上，它运行良好。

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

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

4 个答案: