CSS ::placeholder的用法

在 CSS 中，文本输入框支持名为 placeholder 的 HTML 属性，可以在用户未输入内容的时候显示对应的属性值信息，例如：

<textarea placeholder="不超过140字"></textarea>

此时输入框内会显示灰色的提示信息，如图 1 所示。


不过浏览器默认的占位符颜色比较深（考虑到无障碍访问），通常不符合产品的设计风格，需要自定义颜色，于是就有了 ::placeholder 伪元素。

::placeholder 伪元素一开始并不叫作 ::placeholder，而是 ::-webkit-input-placeholder 和 ::-ms-input-placeholder，它被浏览器支持的历史可以追溯到 2010 年。::placeholder 伪元素在 2017 年才开始正式被各大现代浏览器支持，目前已经可以在各个项目中使用了。

例如：

::placeholder {
    color: darkgray;
}
:focus::placeholder {
    opacity: .4;
}

占位符的灰色变淡，同时增加交互变化，当输入框聚焦的时候，占位符的透明度变成 40%，实现的效果如下图所示。