实现

有三种不同的实现：伪元素、伪类和无。

• 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 ]}
• 2017 年 4 月： 大多数现代浏览器都支持简单的伪元素 ::placeholder ^{[ Ref ]}

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

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

CSS 选择器

用户代理必须忽略具有未知选择器的规则。请参阅 选择器级别 3 ：

a group 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;
}
::-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 为单位调整输入元素的大小，并使用较大的最小字体大小设置对其进行测试。不要忘记翻译：有些语言 需要更多空间 来表达同一个词。
• HTML 支持 placeholder 但 CSS 不支持的浏览器（如 Opera）也应进行测试。
• 占位符不能替代标签，因此请确保您也有一个标签
• 有些浏览器对某些 input 类型（ email 、 search ）使用额外的默认 CSS。这些可能会以意想不到的方式影响渲染。使用 属性 -webkit-appearance 和 -moz-appearance 进行更改。示例：

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

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

这将为所有 input 和 textarea 占位符设置样式。

重要提示： 请勿将这些规则分组。相反，为每个选择器制定单独的规则（组中一个无效选择器会导致整个组无效）。

您可能还想设置文本区域的样式：

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #FF9900;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #FF9900;
}

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>