使用CSS更改输入的HTML5占位符颜色在Chrome上无法使用 [英] Changing an input's HTML5 placeholder color with CSS does not work on Chrome

问题描述

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

I tried to follow the following topic, but unsuccessfully. Change an input's HTML5 placeholder color with CSS

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

I tried to colorize my placeholder, but it still stay grey on Chrome 17.0.963.56 m.

strong> HTML

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/

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

在Firefox 10.0.2上，效果很好。

On Firefox 10.0.2, it works well.

推荐答案

您忘记了：。
因为这个，整个选择器被损坏，没有工作。
http://jsfiddle.net/a96f6/87/

编辑：
看起来像（更新后？）这不工作了，试试这个：

Seems like (after an update?) this doesn't work anymore, try this:

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

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

Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.

编辑说明：
在所有浏览器中使用此代码：

Edit for clarification: To make it work in all browsers, use this code:

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

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

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

::placeholder {
    color:red;
}

这篇关于使用CSS更改输入的HTML5占位符颜色在Chrome上无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！