CSS必填项高亮技巧：required伪类应用

本文深入讲解了如何仅用纯CSS实现表单必填项的智能高亮与用户友好提示：通过`:required`伪类轻松为必填控件添加红色边框和浅红背景，利用`:has()`选择器在关联label旁动态插入醒目的红色星号（兼顾现代浏览器支持与旧版降级方案），并结合`:invalid:not(:placeholder-shown)`精准强化提交失败时的视觉反馈；同时强调必须遵循可访问性原则（避免单靠颜色）、坚持服务端校验不可替代，并确保自定义组件正确透传required属性——让表单体验更直观、健壮且无需一行JavaScript。

直接用 :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 属性

到这里，我们也就讲完了《CSS必填项高亮技巧：required伪类应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！