:required 是纯 CSS 伪类，不自带样式，需手动定义；它仅匹配带 required 属性的表单元素，不影响校验逻辑，且现代浏览器普遍支持但旧版 iOS Safari 和 Android WebView 存在兼容性问题。
为什么 :required 本身不改变样式
:required 是一个伪类选择器，只用于匹配带有 required 属性的表单元素（如 <input required>），它本身不带任何默认样式。浏览器不会自动给它加红框、星号或提示文字——你得自己写 CSS 去响应它。
常见错误现象：写了 input:required { border: 2px solid red; } 却没生效，大概率是因为选择器优先级被其他规则覆盖，或者目标元素压根没正确设置 required 属性（比如写成了 require="true" 或漏了引号）。
- 确保 HTML 中是
required（布尔属性，无需值）或required=""，不是require、required="true" - 检查是否被更具体的选择器（如
input[type="text"]）或!important规则压制 -
:required对<select>和<textarea>同样有效，但对<button>或自定义组件无效
怎么用 :required 加红边框且不影响用户体验
直接改 border 最简单，但要注意两点：一是避免破坏原有盒模型（比如原来用了 box-sizing: border-box，加粗边框会让控件变窄），二是别在聚焦/悬停时丢失视觉反馈。
推荐写法：
立即学习“前端免费学习笔记（深入）”；
input:required,
select:required,
textarea:required {
border-color: #d32f2f;
}
input:required:focus,
select:required:focus,
textarea:required:focus {
outline: none;
border-color: #c62828;
box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2);
}
- 统一处理三类常用必填元素，避免漏掉
<select> - 仅改
border-color，不碰border-width或border-style，防止布局偏移 - 聚焦态用更暗的红色 + 微弱阴影，比单纯加粗更轻量、兼容性更好
- 务必配
outline: none，否则某些浏览器（如旧版 Firefox）会叠加默认焦点环
:required 和 JavaScript 校验的边界在哪
:required 是纯展示层标记，不参与校验逻辑，也不影响表单提交行为（提交失败是浏览器原生校验触发的）。它和 JS 的 checkValidity()、reportValidity() 没有绑定关系。
容易踩的坑：
- 用户删掉输入内容后，
:required样式一直存在，但实际校验失败提示可能延迟出现（比如 onBlur 后才触发）——这时视觉状态和校验状态不同步 - 如果用 JS 动态增删
required属性，:required伪类会实时响应；但若只改disabled或readonly，它不受影响 - 服务端渲染页面中，若初始状态就缺值，建议配合
:invalid使用：input:required:invalid { border-color: #f44336; }，这样空值时才显红，填了就恢复
移动端和老版本浏览器的兼容性注意点
:required 在所有现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+）都支持，但 iOS Safari 9.3 之前对 <select> 的 :required 匹配有 bug，可能不触发样式。
稳妥做法：
- 如果必须支持 iOS 9.2 及更早版本，对
<select>单独加 class，比如<select class="required">，再写select.required { border-color: #d32f2f; } - 不要依赖
:required实现核心功能（比如隐藏/显示字段），它只是辅助提示 - Android WebView（尤其 4.4 KitKat）对伪类支持较弱，建议用 Autoprefixer 编译，并保留一份降级 class 方案
真正难的是让“必填”这个语义在视觉、交互、校验、无障碍之间保持一致。光靠 :required 远不够，但它是最轻量、最自然的起点。
