html – 使用CSS更改HTML5输入的占位符颜色

Chrome支持输入[type = text]元素的placeholder attribute(其他人也可以这样做)。

但是下面的CSS不会蹲到占位符的值:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

值仍将保持灰色而不是红色。

有没有办法改变占位符文本的颜色?

我已经使用jQuery占位符插件为不支持本地的占位符属性的浏览器。

实施

有三种不同的实现:伪元素,伪类,和什么。

> WebKit,Blink(Safari,Google Chrome,Opera 15)和Microsoft Edge都使用伪元素::: – webkit-input-placeholder。 [Ref]
> Mozilla Firefox 4到18使用伪类::-moz-placeholder(一个冒号)。 [Ref]
> Mozilla Firefox 19使用伪元素::: – moz-placeholder,但旧的选择器仍然会工作一段时间。 [Ref]
> Internet Explorer 10和11正在使用伪类::-ms-input-placeholder。 [Ref]

Internet Explorer 9和更低版本不支持占位符属性,而Opera 12 and lower do not support任何用于占位符的CSS选择器。

关于最佳实现的讨论仍在继续。注意,伪元素的行为类似于Shadow DOM中的真实元素。输入上的填充将不会获得与伪元素相同的背景颜色。

CSS选择器

要求用户代理忽略具有未知选择器的规则。参见Selectors Level 3

a 07007 of selectors containing an invalid selector is invalid.

因此,我们需要为每个浏览器单独的规则。否则,所有浏览器都会忽略整个组。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

使用说明

>小心避免不良对比。 Firefox的占位符似乎是默认的减少的不透明度,因此需要使用opacity:1这里。
>请注意,如果占位符文本不合适,请将其剪切;在em中调整输入元素大小,然后使用最小字体大小设置测试。不要忘记翻译:一些语言need more room为同一个词。
>浏览器与HTML支持占位符,但没有CSS支持(如Opera)也应该进行测试。
>某些浏览器对某些输入类型(电子邮件,搜索)使用附加的默认CSS。这些可能以意想不到的方式影响呈现。使用properties -webkit-appearance和-moz-appearance来更改它。例:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

转载注明原文:html – 使用CSS更改HTML5输入的占位符颜色 - 代码日志