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

一尘不染

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

css

我尝试遵循以下主题，但未成功。使用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;
}

在Firefox 10.0.2上，它运行良好。

阅读 395

2020-05-16

共1个答案

一尘不染

你忘记了:。因此，整个选择器已损坏，无法正常工作。

编辑：好像（更新后？）这不再起作用，请尝试以下操作：

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

2020-05-16