CSS :has 处理表单校验状态

功能说明

表单字段容器包含 label、input、提示与错误段落。CSS 通过 .form__field:has(input:user-invalid) 统一改变输入边框、背景，并显示同一容器内的错误文本。aria-invalid=“true” 作为脚本或服务端标记的等价入口。必填字段的 label 通过 :has(input:required) 自动追加星号。字段内输入获得键盘焦点时，整个字段绘制外层轮廓，帮助用户定位当前编辑区域。

关键代码

:user-invalid 只在用户交互或提交尝试后匹配，避免页面刚加载就满屏红框；它比 :invalid 更适合渐进式校验。:has 让父容器根据后代状态改变自身及兄弟错误段落，无需额外类名或 JavaScript。错误文本始终存在于 DOM，只切换 display，读屏器在 aria-invalid 与描述关联下仍可获取。强制颜色模式用 Mark 边框替代背景色。无 :has 时用 input[aria-invalid=“true”] ~ .form__error 回退。

使用注意

:has 与 :user-invalid 的支持范围不同，需分别评估目标浏览器；不支持 :user-invalid 时可让脚本设置 aria-invalid。错误不能只靠颜色表达，必须同时显示文本。:user-invalid 的触发时机由浏览器决定，跨浏览器细节可能不同。服务端校验始终是最终依据。label 后的星号由伪元素生成，读屏器不会朗读，但 required 属性会正确宣布必填。

验证方式

在空表单中直接提交，字段应出现红框与错误文本；输入合法值后红框消失。用 Tab 聚焦字段，容器应出现外层焦点轮廓；用鼠标点击时轮廓表现按浏览器 focus-visible 规则变化。移除 :has 支持或改用旧浏览器，确认设置了 aria-invalid 的字段仍能显示错误。打开强制颜色模式，检查错误边框仍可辨认。

代码示例

/* Markup contract: each .form__field contains a label, an input,
   an optional .form__hint, and a .form__error paragraph. */

.form {
  display: grid;
  gap: var(--space-4, 1.5rem);
  max-inline-size: 32rem;
}

.form__field {
  display: grid;
  gap: var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 0.375rem);
}

.form__field > label {
  font-weight: 600;
}

.form__field input {
  font: inherit;
  padding-block: 0.5rem;
  padding-inline: 0.65rem;
  border: 1px solid var(--color-border, #a1a1aa);
  border-radius: var(--radius-sm, 0.375rem);
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #18181b);
}

.form__error {
  display: none;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-danger, #b91c1c);
}

.form__field:has(input:required) > label::after {
  content: " *";
  color: var(--color-danger, #b91c1c);
}

.form__field:has(input:focus-visible) {
  outline: 2px solid var(--color-focus, #4f46e5);
  outline-offset: 4px;
}

/* :user-invalid appears only after the user has interacted or tried to submit. */
.form__field:has(input:user-invalid) input,
.form__field:has(input[aria-invalid="true"]) input {
  border-color: var(--color-danger, #b91c1c);
  background: var(--color-danger-surface, #fef2f2);
}

.form__field:has(input:user-invalid) .form__error,
.form__field:has(input[aria-invalid="true"]) .form__error {
  display: block;
}

@media (forced-colors: active) {
  .form__field:has(input:user-invalid) input,
  .form__field:has(input[aria-invalid="true"]) input {
    border: 2px solid Mark;
  }
}

/* Fallback without :has: use the general sibling combinator and show the
   message only for inputs explicitly marked invalid by script or server. */
@supports not selector(:has(*)) {
  .form__field input[aria-invalid="true"] {
    border-color: var(--color-danger, #b91c1c);
  }

  .form__field input[aria-invalid="true"] ~ .form__error {
    display: block;
  }
}