CSS :placeholder-shown 选择器

简介

CSS :placeholder-shown 选择器是用来选择当前输入框中 placeholder 显示状态的伪类选择器，即与输入框中输入内容相关的状态，而不是与输入框本身相关的状态。

语法

input:placeholder-shown {
  /* styles */
}

适用对象

这个选择器只适用于具有 placeholder 属性的表单元素，如 input 和 textarea。

示例

下面是一个例子，使用了 :placeholder-shown 选择器来为输入框的 placeholder 状态添加样式。

input[type="text"]:placeholder-shown {
  border: 1px solid green;
}

这会使得在输入框中没有任何文本时 placeholder 显示，并且边框变为绿色。

注意事项

1. 该选择器不兼容 IE 浏览器，可以通过 JS 兼容性方案解决。
2. 在使用该选择器时，需要考虑不同浏览器之间的兼容性，可能需要添加浏览器前缀。

参考资料

• MDN web docs