CSS中::placeholder和::placeholder-shown区别详解

想知道 CSS 中 `::placeholder` 和 `::placeholder-shown` 的区别吗？本文将深入解析这两个相似却功能各异的伪类/伪元素。`::placeholder` 用于设置输入框（如 ``、``）中占位符文本的样式，例如颜色、字体等，但仅作用于占位符本身。而 `::placeholder-shown` 则用于检测输入框是否正在显示占位符，并允许你根据这个状态改变整个输入框的样式，如边框、背景等。通过巧妙结合两者，你可以实现更智能、更友好的表单交互效果，提升用户体验。掌握这两个 CSS 技巧，让你的表单设计更上一层楼！

::placeholder 用于设置占位符文本样式，如颜色和字体；::placeholder-shown 用于判断输入框是否显示占位符，并对输入框整体应用样式，两者结合可实现智能表单交互。

::placeholder 和 ::placeholder-shown 是两个不同的 CSS 伪类或伪元素，虽然名字相似，但用途和行为完全不同。

::placeholder（伪元素）

• 作用对象是 placeholder 文本本身，比如输入框里的“请输入内容”提示文字
• 属于伪元素，用法类似 ::before 或 ::after
• 可以设置颜色、字体、透明度等文本样式
• 浏览器支持需加前缀以确保兼容性（如 ::-webkit-input-placeholder）

示例：

input::placeholder {
  color: #999;
  font-style: italic;
}

::placeholder-shown（伪类）

• 是一个动态伪类，当输入框为空且有 placeholder 时生效
• 一旦用户输入内容，该伪类就不再匹配
• 常用于根据是否显示 placeholder 来切换输入框的整体样式
• 适合做表单状态判断，比如空输入时加边框提示

示例：

input:placeholder-shown {
  border: 2px solid #ccc;
}

input:not(:placeholder-shown) {
  border: 2px solid #4CAF50;
}

基本上就这些。简单说：::placeholder 样式化提示文字，而 ::placeholder-shown 判断输入框是否处于“显示占位符”的状态，并对整个输入框应用样式。两者配合使用能实现更智能的表单交互效果。不复杂但容易忽略区别。

以上就是《CSS中::placeholder和::placeholder-shown区别详解》的详细内容，更多关于的资料请关注golang学习网公众号！