存在三种不同的实现：伪元素、伪类和空。

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

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

关于最佳实现的讨论仍在继续。请注意，伪元素就像Shadow DOM中的真实元素。一个padding上input不会得到相同的背景颜色与伪元素。

CSS 选择器

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

包含无效选择器的一组选择器无效。

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

::-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并使用大的最小字体大小设置来测试它们。不要忘记翻译：某些语言需要为同一个词提供更多空间。
• 支持 HTMLplaceholder但不支持 CSS 的浏览器（如 Opera）也应该进行测试。
• 某些浏览器对某些input类型 ( email, search)使用额外的默认 CSS 。这些可能会以意想不到的方式影响渲染。使用属性 -webkit-appearance并-moz-appearance更改它。例子：

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