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

Question

我试着按照以下主题,但没有成功. 使用CSS更改HTML5输入的占位符颜色

我尝试着色我的占位符,但它仍然在Chrome 17.0.963.56米上保持灰色.

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