: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 事件清理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
