可通过:required伪类为必填表单元素添加视觉提示，如星号、边框高亮或背景色变化；它仅匹配带required属性的input/select/textarea，不触发校验逻辑，需结合:valid/:invalid实现状态反馈。
可以通过 :required 伪类为必填表单元素添加视觉提示，比如星号、边框高亮或背景色变化，但注意它只匹配带有 required 属性的表单控件（如 input、select、textarea），不触发校验逻辑，仅用于样式控制。
基础星号标注（右侧）
在必填项标签后动态插入红色星号，无需修改 HTML 结构：
label:has(input:required)::after,
label:has(select:required)::after,
label:has(textarea:required)::after {
content: " *";
color: #e32;
font-weight: bold;
}⚠️ 注意：:has() 在部分旧版浏览器（如 Safari 15.4 以下）不支持，可改用传统方式：给 label 添加 class 或用 JS 动态处理。
输入框高亮边框
直接对必填输入框设置更醒目的边框样式：
立即学习“前端免费学习笔记（深入）”；
-
input:required, select:required, textarea:required匹配所有带required属性的原生表单控件 - 推荐加
outline: 2px solid #007bff或border: 2px solid #007bff，避免覆盖原有 focus 样式 - 可配合
:focus:required单独定义聚焦时的强调效果
禁用默认冒号提示（Chrome/Firefox）
某些浏览器会在必填 input[type="date"] 等控件右侧自动加星号。如需统一控制，可隐藏原生提示：
input:required::-webkit-inner-spin-button,
input:required::-webkit-calendar-picker-indicator {
opacity: 0.7;
}
/* 或完全隐藏（慎用，影响可访问性） */
input:required::-webkit-calendar-picker-indicator {
display: none;
}✅ 更稳妥做法是统一用 CSS 自定义星号，保持视觉一致性与语义清晰。
结合 :valid/:invalid 做状态反馈
:required 仅表示“必须填”，真正验证需搭配 :valid 和 :invalid：
-
input:required:invalid—— 必填但为空或格式错误时（如邮箱未填） -
input:required:valid—— 已填且通过基本校验（如非空、邮箱格式正确） - 可分别设置红/绿边框、图标或提示文字颜色，提升用户填写体验
