使用:required伪类可为必填表单控件添加视觉高亮，如红色边框和浅红背景；结合:has()在label旁加红色星号；用:invalid:not(:placeholder-shown)强化提交失败反馈；需兼顾可访问性与服务端校验。
直接用 :required 伪类配合 CSS 设置样式，就能为必填表单控件添加视觉高亮，无需 JavaScript。
基础高亮：边框和背景色
最常用的方式是给必填项加红色边框或浅红背景，让用户一眼识别：
input:required,
select:required,
textarea:required {
border-color: #e74c3c;
background-color: #fff8f8;
}
注意：:required 只匹配带有 required 属性的元素（如 <input required>），不依赖 type 或 name，语义清晰可靠。
增强提示：添加星号（*）标识
在标签（label）旁动态插入红色星号，更符合表单设计规范：
立即学习“前端免费学习笔记（深入）”；
label:has(+ input:required),
label:has(+ select:required) {
position: relative;
}
label:has(+ input:required)::after,
label:has(+ select:required)::after {
content: " *";
color: #e74c3c;
font-weight: bold;
}
⚠️ 注意：:has() 是较新特性（Chrome 105+、Firefox 121+、Safari 15.4+ 支持），旧浏览器需降级处理（如手动加 class="required" 配合 CSS）。
提交校验失败时强化反馈
仅靠 :required 不够——用户没填就点提交，浏览器会自动聚焦并弹原生提示。可进一步用 :invalid:not(:placeholder-shown) 精准捕获已失焦且为空的必填项：
input:required:invalid:not(:placeholder-shown),
select:required:invalid:not(:placeholder-shown),
textarea:required:invalid:not(:placeholder-shown) {
outline: 2px solid #c0392b;
box-shadow: 0 0 6px rgba(192, 57, 43, 0.3);
}
这个组合选择器能避免 placeholder 还在时误触发样式，体验更细腻。
兼容性与注意事项
-
:required兼容所有现代浏览器，包括 IE10+，放心使用 - 不要只靠颜色区分——加图标、边框粗细或文字提示，兼顾色觉障碍用户
- 服务器端仍必须校验 required 字段，前端样式仅为体验优化，不可替代逻辑验证
- 对自定义组件（如封装的 Select 或 DatePicker），需确保其底层 input/textarea 正确透传
required属性
