CSS中empty与required表单控制技巧

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS中:empty与:required在表单控制中的应用》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

:empty不适用于表单控件，仅匹配无任何子节点的元素；:required仅反映required属性存在与否，不判断实际填写状态；真实验证需结合:valid/:invalid及JS校验。

：:empty 不适用于表单控件的值判断

:empty 只匹配**完全不包含子节点（包括文本节点、元素节点、注释节点）的元素**。它对 <input>、<textarea>、<select> 这类**空元素（self-closing 或无结束标签）无效**——因为它们天生没有子节点，但用户输入的内容并不作为子节点存在，而是通过 value 属性或 DOM 属性体现。

常见误解是写 input:empty { border: 2px solid red; } 想高亮空输入框，实际永远不生效。浏览器会忽略该规则，或在 DevTools 中显示为“不匹配”。

• → 匹配 :empty
• （含空格/换行）→ 不匹配（有文本节点）
• <input value=""> → 不匹配 :empty（无子节点，但不是“内容为空”的语义）
• <textarea></textarea> → 不匹配（即使内容为空，其文本内容是 DOM 的 textContent，不是子节点）

：:required 只反映 HTML 属性，不校验实际填写状态

:required 是一个**结构伪类**，仅当元素带有 required 属性时匹配，与用户是否填了值无关。它适合做视觉提示（比如加星号、边框样式），但不能替代 JS 验证逻辑。

例如：input:required:not(:valid) { border-color: #e53e3e; } 才能表达“必填但未填”的状态；单独用 :required 只是“被声明为必填”。

• <input required> → 匹配 :required
• <input required value="abc"> → 仍匹配 :required（属性没变）
• <input> → 不匹配，哪怕 JS 动态加了 required 属性（注意：动态添加属性后，CSS 会响应，但某些旧浏览器需触发重绘）
• 兼容性：IE10+ 支持，无需前缀

：结合 :valid/:invalid 做真实表单反馈

原生表单验证靠的是浏览器对 type、required、pattern、min/max 等属性的解析，配合 :valid 和 :invalid 才能反映当前值是否合规。

注意：:invalid 在用户**未交互前**可能已触发（如空 required 输入框默认 invalid），可用 :user-invalid（Chrome 107+/Safari 16.4+）延迟样式应用，但兼容性有限，生产环境建议搭配 JS 的 checkValidity() 或监听 input/blur。

input:required:invalid {
  background-color: #fff5f5;
}
input:required:valid {
  background-color: #f0fff4;
}
/* 防止初始加载就标红，可加 class 控制 */
input:not(.touched):invalid {
  background-color: transparent;
}
input.touched:invalid {
  background-color: #fff5f5;
}

：为什么不能只靠 CSS 做表单验证？

CSS 伪类无法捕获语义错误（如“密码两次输入不一致”）、异步校验（如用户名是否已被注册）、或自定义规则（如“手机号必须为 11 位且以 1 开头”）。这些必须由 JS 实现，并通过 setCustomValidity() 注入验证状态，才能让 :invalid 生效。

• 调用 input.setCustomValidity("用户名已存在") 后，input:invalid 才会匹配
• 清空校验需 input.setCustomValidity("")（空字符串表示 valid）
• :required 和 :optional 无法被 JS 动态切换（属性存在即生效），但 required 属性本身可以用 el.required = true/false 控制
• 无障碍方面：aria-invalid 和 aria-describedby 必须由 JS 同步更新，CSS 无法提供语义信息

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。