如何用现代CSS伪类:has()实现条件关联表单校验样式？-css教程-PHP中文网

:has() 可使父容器响应子元素表单校验状态，如 div.field:has(input:invalid) 设置红框；需配合原生验证属性，注意 Safari 兼容性与性能开销。

如何用现代css伪类:has()实现条件关联表单校验样式？

现代浏览器中，:has() 能直接根据子元素状态反向影响父容器样式——这正是表单校验样式的痛点：传统 CSS 无法从 input:valid 向上影响包裹它的 label 或 div.field。现在可以了。

关键在于把校验逻辑“下沉”到 HTML 结构里，让待响应的容器成为 :has() 的主体，而 input 是其后代（或相邻兄弟）：

div.field:has(input:invalid) {
  border-color: #e53e3e;
}
div.field:has(input:valid) {
  border-color: #38a169;
}

注意：:has() 不支持伪元素和某些伪类组合（如 :has(:focus:invalid) 在 Safari 16.4+ 才稳定），且不能用于 @keyframes 或选择器开头（如 :has(input):hover 合法，但 :has(input) .hint 不合法）。

不用 JS 控制 display，也能让 .error-message 随输入状态自动出现/消失——前提是它和 input 处于同一父容器下，且结构可被 :has() 捕获。

div.field:has(input:invalid) .error-message → 显示错误文案
div.field:has(input:not(:invalid)) .error-message → 隐藏（注意不是 :valid，因为初始空值常为 :invalid 但非用户已输错）
若错误提示在 input 后面作为相邻兄弟，可用 input:invalid + .error-message，更轻量，但灵活性低

示例结构必须是：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

<div class="field">
  <label>邮箱</label>
  <input type="email" required><span class="error-message">请输入有效邮箱</span>
</div>

:has() 响应的是浏览器原生校验状态，依赖 required、type="email"、pattern 等属性触发 :invalid / :valid。它不感知自定义 JS 校验结果。

空值 + required → 触发 :invalid（但提交前可能不显示红框，取决于 :user-invalid 行为）
输入后失焦（blur）才稳定触发 :invalid，实时校验需搭配 input 事件 + JS 设置 setCustomValidity()
input:invalid:not(:user-invalid) 可区分“未交互过的无效态”和“用户改过又输错”，但 :has() 无法直接嵌套这个判断，得靠额外 class 控制