:required伪类不生成内容，需搭配::before或::after实现红星效果；checkbox/radio需单独处理定位；表单重置后状态不更新需js干预；ie11仅支持[required]属性选择器。
required伪类本身不生成内容，必须搭配::before或::after
很多人以为写个 input:required 就能自动加红星，结果页面毫无反应——因为 :required 只是状态选择器，它不渲染任何东西。真正负责“显示红星”的，是 ::after 或 ::before 伪元素。
实操要点：
- 必须给
input:required设置position: relative（否则伪元素定位会飘） - 伪元素需设
content: "*"，且display: inline-block或block - 推荐用
::after放在输入框右侧，避免影响 label 布局 - 别忘了设置颜色，比如
color: #e53935，否则可能继承默认文本色，看不清
input[type="checkbox"]和radio需要单独处理
input:required 对 type="checkbox" 和 type="radio" 也生效，但直接加 ::after 会出现在复选框/单选按钮**内部**，视觉错乱甚至盖住勾选标记。
稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 用属性选择器区分：
input:required[type="checkbox"]或input:required[type="radio"] - 伪元素改用
::before并绝对定位到标签（label）旁，而不是 input 自身 - 或者干脆不依赖伪元素，改用 label 后加
<span class="required">*</span>，CSS 控制显隐更可控
表单重置后 required 状态不会自动更新
用户点 <button type="reset"></button> 后，input 的 DOM required 属性还在，但浏览器不会重新触发 :required 的样式重绘——看起来像“红星没消失”，其实只是样式残留。
原因和对策：
- 这不是 CSS 缺陷，而是浏览器对表单重置的实现逻辑：重置只清值、不重置伪类状态
- 如果业务强依赖视觉同步，得用 JS 监听
reset事件，手动 toggle 一个 class（比如.is-required-shown），再用.is-required-shown::after控制显示 - 纯 CSS 方案目前无解，别硬扛
IE11 不支持 :required 伪类，但可降级为 [required]
IE11 完全不认 input:required，但支持属性选择器 input[required]。两者行为一致，且兼容性拉满。
建议写法：
- 统一用
input[required]开头，避免 IE 下完全失效 - 现代浏览器下
[required]和:required效果相同，无需额外判断 - 注意：若 input 是通过 JS 动态添加
required属性，IE11 下[required]仍会生效，而:required在旧版中压根不支持动态状态
