移除required属性后CSS输入框交互失效的解决方案咨询

算力阿峰

2026-7-12

解决移除input的required属性后表单交互失效的问题

问题根源

原来的CSS逻辑依赖required属性配合:valid伪类：带required时，空输入会触发:invalid，标签保持原位；输入内容后变为:valid，标签上移。但移除required后，空输入也会被判定为:valid，直接打乱了标签的状态逻辑。

解决方案

改用:focus（聚焦状态）和:not(:placeholder-shown)（已输入内容状态）两个伪类组合，同时给input添加空占位符（必须带空格），就能实现和带required时完全一致的效果：

给input标签添加placeholder=" "（空格不能省略，否则部分浏览器无法识别:not(:placeholder-shown)伪类）
替换原有CSS的:valid逻辑，修改为以下代码：

/* 聚焦输入框时，标签上移 */
.input-data input:focus ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
}

/* 输入内容后，无论是否聚焦，标签都保持上移状态 */
.input-data input:not(:placeholder-shown) ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #2e4f5c;
}