使用 CSS 更改 HTML5 输入的占位符颜色 [英] Change a HTML5 input's placeholder color with CSS

问题描述

Chrome 支持 input[type=text] 元素上的占位符属性">占位符属性(其他人可能也这样做).

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

但以下 CSS 对占位符的值没有任何影响:

But the following CSS doesn't do anything to the placeholder's value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

但 Value 仍将保持 grey 而不是 red.

But Value will still remain grey instead of red.

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

推荐答案

实施

共有三种不同的实现:伪元素、伪类和无.

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

• WebKit、Blink(Safari、Google Chrome、Opera 15+)和 Microsoft Edge 正在使用伪元素:::-webkit-input-placeholder.^[参考]
• Mozilla Firefox 4 到 18 使用伪类::-moz-placeholder(one 冒号).^[参考]
• Mozilla Firefox 19+ 正在使用一个伪元素:::-moz-placeholder，但旧的选择器仍然可以工作一段时间.^[参考]
• Internet Explorer 10 和 11 使用伪类::-ms-input-placeholder.^[参考]
• 2017 年 4 月:大多数现代浏览器都支持简单的伪元素 ::placeholder ^[Ref]

• WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder. ^[Ref]
• Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). ^[Ref]
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. ^[Ref]
• Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. ^[Ref]
• April 2017: Most modern browsers support the simple pseudo-element ::placeholder ^[Ref]

Internet Explorer 9 及更低版本根本不支持 placeholder 属性，而 Opera 12 及更低版本不支持任何用于占位符的 CSS 选择器.

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

关于最佳实现的讨论仍在继续.请注意，伪元素的行为类似于 Shadow 中的真实元素DOM.input 上的 padding 不会获得与伪元素相同的背景颜色.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

用户代理需要忽略带有未知选择器的规则.请参阅选择器级别 3:

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

包含无效选择器的 组 选择器无效.

a group of selectors containing an invalid selector is invalid.

所以我们需要为每个浏览器制定单独的规则.否则整个组将被所有浏览器忽略.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-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;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">

• 注意避免不良对比.Firefox 的占位符似乎默认降低了不透明度，因此需要在此处使用 opacity: 1.
• 请注意，如果占位符文本不合适，它就会被截断——在 em 中调整输入元素的大小，并使用大的最小字体大小设置来测试它们.不要忘记翻译:某些语言需要更多空间同样的话.
• 对 placeholder 提供 HTML 支持但没有 CSS 支持的浏览器(如 Opera)也应该进行测试.
• 某些浏览器对某些 input 类型(email、search)使用额外的默认 CSS.这些可能会以意想不到的方式影响渲染.使用 属性 -webkit-appearance 和 -moz-appearance 来改变它.示例:

• Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
• Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
• Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
• Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

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

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