`:placeholder-shown` 伪类：表单占位符的交互设计

`:placeholder-shown` 伪类：让你的表单占位符不再是背景板

大家好！有没有遇到过这样的情况：精心设计的表单，配上恰到好处的占位符，希望给用户提供清晰的输入提示。结果呢？用户对着空空的输入框发呆，完全忽略了那浅灰色的文字，最后还是得靠“请输入您的姓名”这样的标签来救场？

如果你也曾为此苦恼，那么今天咱们要聊的:placeholder-shown伪类，绝对能让你眼前一亮。它就像一个神奇的开关，能让你在占位符显示和隐藏时，对输入框进行不同的样式控制，从而提升用户体验，让你的表单更智能、更贴心。

占位符：爱恨交织的小伙伴

在深入了解:placeholder-shown之前，我们先来简单回顾一下占位符（placeholder）。它是一种HTML属性，用于在输入框（input）、文本域（textarea）等表单控件中显示提示文字，当用户开始输入时，占位符会自动消失。

占位符的优点显而易见：

简洁美观： 减少了标签的使用，让表单看起来更简洁。
提示信息： 帮助用户了解输入框应该填写什么内容。

但是，占位符也存在一些问题：

可访问性问题： 屏幕阅读器可能不会读取占位符，对视力障碍用户不友好。
易被忽略： 浅灰色的文字容易被用户忽略，尤其是在颜色对比度较低的情况下。
无法持久提示： 一旦用户开始输入，提示信息就消失了，如果用户想不起来该怎么填，就只能清空重来。

所以，占位符就像一个爱恨交织的小伙伴，用好了能锦上添花，用不好反而会弄巧成拙。

:placeholder-shown：让占位符不再是背景板

:placeholder-shown 伪类就是来解决占位符“存在感低”的问题的。它允许你在占位符显示时，对输入框应用特定的样式。也就是说，只有当输入框中显示占位符时，你定义的样式才会生效。

举个例子，我们想要在占位符显示时，给输入框添加一个边框：

input:placeholder-shown {
  border: 2px solid #007bff; /* 蓝色边框 */
}

这段CSS代码的意思是：当 input 元素显示占位符时，添加一个蓝色的边框。是不是很简单？

更进一步，我们可以让占位符消失时，输入框的边框变成绿色，表示用户可以开始输入了：

input {
  border: 1px solid #ccc; /* 默认边框 */
}

input:placeholder-shown {
  border: 2px solid #007bff; /* 占位符显示时的蓝色边框 */
}

input:not(:placeholder-shown) {
  border: 2px solid #28a745; /* 占位符消失后的绿色边框 */
}

这里我们使用了 :not() 伪类，:not(:placeholder-shown) 表示不显示占位符的输入框。

:placeholder-shown 的应用场景：花式玩法大赏

:placeholder-shown 的应用场景非常广泛，只要你能想到的，基本都能实现。下面我们来看几个具体的例子，希望能给你带来一些启发：

突出显示占位符：

正如我们前面提到的，占位符的颜色通常比较浅，容易被忽略。我们可以通过:placeholder-shown 来改变输入框的背景颜色，或者增加阴影效果，让占位符更加醒目。
```
input:placeholder-shown {
  background-color: #f0f8ff; /* 淡蓝色背景 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
```
动态提示信息：

除了改变样式，我们还可以利用 :placeholder-shown 和 JavaScript 结合，实现更复杂的交互效果。比如，当占位符显示时，在输入框旁边显示一个动态的提示信息。
```
<input type="text" placeholder="请输入您的邮箱" id="email">
<span id="email-tip" style="display: none;">邮箱格式：[email protected]</span>

<style>
    input:placeholder-shown + #email-tip {
        display: block; /* 显示提示信息 */
    }
</style>
```
这段代码中，当 input 元素显示占位符时，紧随其后的 span 元素（id为 email-tip）就会显示出来，提示用户邮箱的正确格式。
验证提示：

:placeholder-shown 还可以用来实现简单的验证提示。比如，当用户输入的内容不符合占位符的提示时，可以改变输入框的边框颜色，或者显示错误信息。当然，更复杂的验证还需要使用 JavaScript。
```
input:invalid:placeholder-shown {
  border: 2px solid #dc3545; /* 红色边框，表示输入无效 */
}
```
这段代码中，:invalid 伪类表示输入无效的输入框。当输入无效且显示占位符时，输入框的边框会变成红色。
个性化定制：

:placeholder-shown 的灵活性在于，你可以根据自己的需求，对输入框进行各种个性化定制。比如，你可以改变输入框的字体、字号、颜色，甚至可以添加动画效果，让你的表单更具吸引力。
```
input:placeholder-shown {
  font-style: italic; /* 斜体 */
  color: #777; /* 深灰色 */
  animation: shake 0.5s; /* 抖动动画 */
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
```
这段代码中，当占位符显示时，输入框的字体会变成斜体，颜色会变成深灰色，并且会有一个抖动动画。

:placeholder-shown 的兼容性：不用担心，放心使用

:placeholder-shown 伪类的兼容性非常好，几乎所有主流浏览器都支持它，包括 Chrome、Firefox、Safari、Edge 等。所以，你可以放心地在你的项目中使用它，不用担心兼容性问题。

总结：让你的表单更上一层楼

:placeholder-shown 伪类是一个非常实用的小工具，它可以让你更好地控制表单的样式，提升用户体验。通过巧妙地运用 :placeholder-shown，你可以让你的表单不再单调乏味，而是变得更加智能、更加贴心。

记住，好的用户体验往往体现在细节之中。利用 :placeholder-shown 这样的细节优化，可以让你的表单设计更上一层楼，赢得用户的喜爱。

下次设计表单的时候，不妨试试 :placeholder-shown 吧！相信你会发现它带来的惊喜。

希望这篇文章能帮助你更好地理解 :placeholder-shown 伪类，并在你的项目中灵活运用它。祝你设计出更棒的表单！

:placeholder-shown 伪类：让你的表单占位符不再是背景板

发表回复 取消回复

`:placeholder-shown` 伪类：让你的表单占位符不再是背景板

发表回复取消回复