本文详解如何通过 :placeholder-shown 与 :not() 伪类替代 :valid，实现无 required 属性时的输入状态检测，确保标签浮动、下划线动画等视觉效果在用户输入后持久生效。
本文详解如何通过 :placeholder-shown 与 :not() 伪类替代 :valid，实现无 required 属性时的输入状态检测，确保标签浮动、下划线动画等视觉效果在用户输入后持久生效。
在构建现代表单时，常使用“浮动标签（floating label）”设计：输入框获得焦点或已有内容时，原本位于输入框内部的 <label> 向上平移并缩小，形成清爽的 UX 效果。传统方案依赖 input:valid ~ label 配合 required 属性触发校验状态——但一旦移除 required（例如非必填字段），:valid 将始终为 false，导致标签无法保持上浮状态，用户体验断裂。
根本原因在于：:valid 仅响应 HTML5 表单验证状态（如 required、type="email" 等），而非实际内容存在性。要解耦「有内容」与「必填」逻辑，需转向内容感知型伪类。
✅ 正确方案：用 :not(:placeholder-shown) 检测输入行为
CSS 提供了 :placeholder-shown 伪类——当 <input> 显示 placeholder 文本时匹配；反之，当用户输入任意字符（哪怕空格），placeholder 隐藏，:placeholder-shown 不再匹配。因此：
input:not(:placeholder-shown) ~ label {
transform: translateY(-20px);
font-size: 14px;
color: #2e4f5c;
}该选择器精准捕获「用户已输入内容」这一状态，且不依赖任何 HTML 验证属性，完美替代 :valid 的局限性。
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意：此方案要求 <input> 必须设置 placeholder 属性（即使为空字符串 placeholder=""）。若完全省略 placeholder，:placeholder-shown 永远不匹配，规则失效。
? 完整实现示例
以下为可直接运行的精简版代码（含焦点态与输入态双触发）：
<div class="input-data"> <input type="text" placeholder="" id="company"> <div class="underline"></div> <label for="company">Empresa</label> </div>
.input-data input {
width: 100%;
height: 40px;
border: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
font-size: 17px;
padding-bottom: 5px;
}
.input-data label {
position: absolute;
bottom: 10px;
left: 0;
pointer-events: none;
font-size: 16px;
transition: all 0.3s ease;
color: #666;
}
/* 双条件触发：聚焦时 + 有输入时 */
.input-data input:focus ~ label,
.input-data input:not(:placeholder-shown) ~ label {
transform: translateY(-20px);
font-size: 14px;
color: #2e4f5c;
}
/* 下划线动画（同理增强体验） */
.input-data .underline::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #2e4f5c;
transition: width 0.3s ease;
}
.input-data input:focus ~ .underline::before,
.input-data input:not(:placeholder-shown) ~ .underline::before {
width: 100%;
}? 关键要点总结
- 必须声明 placeholder：即使值为空（placeholder=""），否则 :placeholder-shown 无意义；
- 兼容性提示：:placeholder-shown 在 Chrome 47+、Firefox 51+、Safari 9.1+、Edge 79+ 中稳定支持（Can I use）；
- 避免误用 ~：确保 <label> 是 <input> 的后续兄弟元素（DOM 顺序正确），否则组合器失效；
- 无障碍友好：保留 for/id 关联，确保屏幕阅读器正常识别；
- 进阶优化：对密码、数字等类型，可结合 type="text" + inputmode="text" 保证 placeholder 行为一致。
通过此方案，你既能摆脱 required 的强制约束，又能维持专业级的交互反馈——让每一个表单字段，无论是否必填，都拥有统一、可靠、符合直觉的视觉表现。
