css 表单必填项怎么高亮显示_结合 required 伪类选择器_技术教程

:required伪类仅匹配必填控件但不自动高亮，需配合CSS设置边框、背景等样式；推荐用:required:not(:disabled)排除禁用项，并用:has()或JS实现星号标注；:invalid:required用于提交校验失败时的错误态提示。

required 伪类选择器本身不能直接高亮必填项

很多人以为 :required 能像 :hover 那样自动加样式，其实它只是个状态匹配器——它能选中带 required 属性的表单控件，但**不触发任何默认视觉变化**。真正要“高亮”，得自己写 CSS 规则，比如加边框、背景色或星号。

给 input[type="text"] 等基础控件加红色边框

最常用也最稳妥的做法是用 :required:not(:disabled) 排除禁用状态，避免误标：

input:required:not(:disabled),
select:required:not(:disabled),
textarea:required:not(:disabled) {
  border-color: #e53e3e;
}
input:required:not(:disabled):focus,
select:required:not(:disabled):focus,
textarea:required:not(:disabled):focus {
  box-shadow: 0 0 0 1px #e53e3e;
}

注意点：

:required 对也生效，但它不可见，加样式没意义，所以建议显式限定类型
别只靠颜色区分——色觉障碍用户可能看不出红/灰差异，建议搭配 border-style: solid 或 outline
某些浏览器（如旧版 Safari）对 :required 的支持有延迟，首次渲染可能不生效，可加 input:required { will-change: border-color; } 做兼容性兜底

在 label 后面动态插入红色星号

纯 CSS 实现“必填项标 *”，推荐用 ::after 伪元素，前提是 label 和 input 有明确关联（通过 for 或嵌套）：

label[for] > input:required + span::after,
label > input:required + span::after,
label[for]::after,
label > :required + span::after {
  content: " *";
  color: #e53e3e;
  font-size: 0.875em;
}
/* 更健壮的写法：匹配所有带 for 属性的 label，且其对应 input 有 required */
label[for]:has(+ input:required)::after,
label[for]:has(+ select:required)::after,
label[for]:has(+ textarea:required)::after {
  content: " *";
  color: #e53e3e;
}

⚠️ 注意：:has() 在 Chrome 105+ / Firefox 121+ 才稳定支持；若需兼容老浏览器，得靠 JS 注入 aria-required="true" 后用属性选择器模拟。

提交时校验失败再强化提示

:invalid:required 是更关键的组合——它只在用户已输入但值不合法（或为空）时触发，适合做错误态高亮：

input:invalid:required:not(:placeholder-shown),
textarea:invalid:required:not(:placeholder-shown) {
  background-color: #fff5f5;
  border-color: #c53030;
}
input:invalid:required:not(:placeholder-shown) + .error-message {
  display: block;
}

这里 :not(:placeholder-shown) 很重要：防止用户还没输就看到红色背景。另外，:invalid 在用户未交互前可能就生效（尤其空 required 字段），所以务必结合交互状态控制显示时机。

真正容易被忽略的是：表单重置（form.reset()）后，:invalid 状态不会自动清除，得手动调用 input.setCustomValidity('') 或监听 reset 事件清理。