如何在移除 required 属性后仍保持 CSS 输入框浮动标签效果？-html教程-PHP中文网

本文详解如何通过 :placeholder-shown 与 :not() 伪类替代 :valid，实现无 required 属性时的输入状态检测，确保标签浮动、下划线动画等视觉效果在用户输入后持久生效。

本文详解如何通过 :placeholder-shown 与 :not() 伪类替代 :valid，实现无 required 属性时的输入状态检测，确保标签浮动、下划线动画等视觉效果在用户输入后持久生效。

在构建现代表单时，常使用“浮动标签（floating label）”设计：输入框获得焦点或已有内容时，原本位于输入框内部的向上平移并缩小，形成清爽的 UX 效果。传统方案依赖 input:valid ~ label 配合 required 属性触发校验状态——但一旦移除 required（例如非必填字段），:valid 将始终为 false，导致标签无法保持上浮状态，用户体验断裂。

根本原因在于：:valid 仅响应 HTML5 表单验证状态（如 required、type="email" 等），而非实际内容存在性。要解耦「有内容」与「必填」逻辑，需转向内容感知型伪类。

✅ 正确方案：用 :not(:placeholder-shown) 检测输入行为

CSS 提供了 :placeholder-shown 伪类——当显示 placeholder 文本时匹配；反之，当用户输入任意字符（哪怕空格），placeholder 隐藏，:placeholder-shown 不再匹配。因此：

input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
}

该选择器精准捕获「用户已输入内容」这一状态，且不依赖任何 HTML 验证属性，完美替代 :valid 的局限性。

⚠️ 注意：此方案要求必须设置 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）；
避免误用 ~：确保是的后续兄弟元素（DOM 顺序正确），否则组合器失效；
无障碍友好：保留 for/id 关联，确保屏幕阅读器正常识别；
进阶优化：对密码、数字等类型，可结合 type="text" + inputmode="text" 保证 placeholder 行为一致。