实施

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

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