::placeholder-shown伪类可动态调整输入框样式，实现浮动标签、视觉权重变化等交互效果。1. 用于选中显示占位符的输入框，用户输入后样式自动切换；2. 结合CSS过渡实现标签上移缩小的浮动效果；3. 未输入时弱化边框背景，提升界面整洁度；4. 需考虑浏览器兼容性，配合JavaScript降级处理；5. 始终保留语义化标签保障可访问性。合理运用能增强表单友好性与美观度。
在现代网页表单设计中，用户体验至关重要。CSS 伪类 ::placeholder-shown 提供了一种简洁有效的方式来根据输入框是否显示占位符文本动态调整样式。它帮助开发者实现更直观、美观的交互效果，尤其适用于优化表单的视觉反馈和布局结构。
理解 ::placeholder-shown 的作用
::placeholder-shown 是一个 CSS 伪类，用于选中当前正在显示 placeholder 文本的输入框。当用户在输入框中输入内容后，placeholder 消失，该状态也随之失效。
与 :focus 或 :valid 不同，::placeholder-shown 反映的是输入框是否有占位符可见，而不是焦点或验证状态。这一特性使其非常适合用来控制标签、边框、背景等样式的动态变化。
实现浮动标签效果
浮动标签（Floating Labels）是一种常见且优雅的表单设计模式：初始时标签作为占位符显示在输入框内，用户开始输入后，标签上移并变小，保持可见。
立即学习“前端免费学习笔记（深入）”；
结合 ::placeholder-shown 与 CSS 过渡，可以轻松实现这一效果：
label {position: relative;
transition: all 0.2s ease;
}
input::placeholder-shown + label {
top: 10px;
font-size: 16px;
}
input:not(::placeholder-shown) + label,
input:focus + label {
top: 0;
font-size: 12px;
color: #007acc;
}
这种设计让用户始终清楚当前输入项对应的字段，减少误填概率。
动态调整输入框样式
利用 ::placeholder-shown，可以在用户未输入时弱化输入框的视觉权重，提升界面整洁度。
- 未输入时使用浅色边框和背景，降低干扰
- 用户开始输入后自动增强边框颜色或添加阴影
- 配合透明度变化营造渐入效果
示例：
input::placeholder-shown {border-color: #ddd;
background-color: transparent;
}
input:not(::placeholder-shown) {
border-color: #007acc;
background-color: #f9f9f9;
}
提升可访问性与兼容性考量
虽然 ::placeholder-shown 支持主流现代浏览器，但在旧版本 IE 和部分移动浏览器中可能不被识别。建议：
- 确保基础表单仍可正常操作，不依赖此特效
- 使用合理的默认样式作为降级方案
- 结合 JavaScript 实现更复杂的交互逻辑（如强制标签上移）
同时注意 placeholder 文本不应替代
基本上就这些。合理使用 ::placeholder-shown 能让表单更智能、更友好，关键是把握好视觉节奏和可用性之间的平衡。
