:required仅标识必填属性，需配合css样式、html正确写法及交互逻辑实现完整校验提示；常见失效原因包括属性书写错误、框架未透传属性或样式优先级冲突。
:required 本身不加任何样式，它只是个“开关”——能帮你精准选中带 required 属性的表单控件，但要不要标红、加星号、改边框，全得你手动写 CSS。没生效？八成是属性漏了、浏览器不认，或者样式被覆盖了。
为什么写了 input:required { border: 2px solid red; } 却没反应
最常见原因就三个：
• HTML 里写的是 require="true" 或 required="required" —— 正确写法只有 required（布尔属性，无值）或 required=""；
• 表单控件是自定义封装的（比如 React 的 MyInput），框架没把 required 属性透传到原生 input 上；
• 样式被更高优先级规则压住了，比如 .form-control input 比 input:required 权重高，又没加 !important（不推荐硬加）。
label 后加红色星号，用 ::after 最稳妥
别往 input 上打主意——它是替换元素，不支持 ::before/::after。星号必须加在 label 上，且只对真正必填的字段生效：
• 推荐写法：label[for]:has(+ input:required)::after，匹配 <label for="name">姓名</label><input id="name" required> 这种结构；
• 兼容旧版 Safari（≤15.4）？换回手动加 class：label.required::after { content: "*"; color: #d32f2f; margin-left: 4px; }；
• 别用 display: none 隐藏星号——屏幕阅读器会跳过，语义就断了；如果 label 文本里已有 “*”，CSS 只做视觉增强，不新增信息。
:required:invalid 才是用户真正需要的“错误态”
:required 只表示“这个得填”，不表示“你还没填”。想做到「空着就标红，填了就变绿」，必须组合 :invalid 和 :valid：
• input:required:invalid:not(:placeholder-shown)：排除 placeholder 还在显示的情况，避免刚点进去就变红；
• input:required:valid：已填且格式合法（如邮箱非空且含 @）；
• 注意：:invalid 在首次加载时通常不触发（浏览器默认延迟校验），所以别指望页面一打开所有空必填项自动红；若需强提示，得配合 JS 调用 reportValidity() 或手动加 class。
边框高亮要防布局偏移和色觉障碍
直接改 border-width 容易撑开盒子，尤其用了 box-sizing: border-box 的项目：
• 正确做法是只动 border-color，保持 border-style 和 border-width 不变；
• 别只靠颜色区分——红/灰对红绿色盲用户几乎无差别，建议搭配 border-style: solid + outline 或小图标；
• 禁用状态也要排除：input:required:not(:disabled)，否则禁用的必填项也跟着红，反而误导用户。
:required 和校验逻辑完全解耦——它不管填没填、对不对，只管“有没有 required 属性”。你要的“醒目标识”，其实是三件事叠加：HTML 层正确声明、CSS 层精准选择、交互层适时反馈。少一个环节，用户看到的就是静止的、不可靠的视觉信号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
