CSS ::placeholder 和 :placeholder-shown

` :placeholder-shown` CSS 伪类代表当前显示占位符文本的任何 `` 或 `` 元素。

<input type="text" placeholder="some text" />

input:placeholder-shown {
  font-family: "Baloo 2", cursive;
  font-weight: bold;
  background-color: pink;
}

输出：

在上面的代码片段中，

1. 如果用户没有输入任何内容，则占位符显示的背景颜色将为粉红色
2. 当用户输入内容时，将不会显示占位符，并且背景颜色将透明

📝笔记:placeholder-shown如果没有占位符文本，则：将不起作用

🗓示例：

<input type="text" />

input:placeholder-shown {
  background-color: pink;
}

❌ 上述代码片段不起作用

:placeholder-shown 与 ::placeholder 🔥

我们可以用来:placeholder-shown设置输入元素的样式。

input:placeholder-shown {
  border: 1px solid pink;
  background: yellow;
  color: blue;
}

这里我们设置了color: blue，但它不起作用。这是因为:placeholder-shown只会定位到输入框本身。但对于实际的占位符文本，你必须使用伪元素::placeholder。

::placeholder伪元素可用于设置元素中的占位符文本的<input>样式<textarea>。

input::placeholder {
  color: blue;
}

输出：

如果您想为空占位符添加样式，我们可以传递空字符串" "作为占位符。

<input type="text" placeholder=" " />

输出：

现在，我们为什么不把两个选择器:not和结合起来呢:placeholder-shown？
这样我们就可以确定输入是否为空，然后应用 CSS。

<input placeholder="some text" value="Check with empty!" />

input:not(:placeholder-shown) {
  background-color: pink;
}

输出：

在上面的代码片段中，

1. 如果输入有值，那么background-color将会被应用
2. 如果输入为空，background-color则不适用

📝笔记：::placeholder不适用于:not选择器。

参考🧐

• MDN 文档占位符
• MDN Doc 占位符显示
• caniuse - 占位符显示