:required伪类需配合HTML中真实存在的required属性才能生效，仅对、、等原生表单控件有效；required="false"无效，动态添加需确保DOM更新，旧版Safari存在兼容性问题。
如何让 :required 伪类真正生效并显示视觉提示
直接写 input:required { border: 2px solid red; } 往往没反应——不是 CSS 写错了，而是 HTML 没配对。浏览器只对带 required 属性的表单控件（input、select、textarea）应用该伪类，且属性必须是**存在即生效**，不依赖值是否为空或是否合法。
常见错误包括：
- 写了
required="false"或required=""（空字符串也生效，但required="false"是无效写法，会被忽略） - 用 JS 动态添加
required属性但没触发样式重绘（需确保 DOM 更新后样式引擎能捕获） - 对
div或自定义组件误用:required（它只作用于原生可提交表单控件）
为什么 :required 样式在某些浏览器里不显示
主要出现在旧版 Safari（:required 支持度没问题，但若同时用了 appearance: none 或重置了 border 却没显式声明 box-sizing: border-box，可能导致边框“消失”——实际渲染了，但被其他样式覆盖或尺寸计算异常。
稳妥做法：
立即学习“前端免费学习笔记（深入）”；
- 始终为
input:required显式设置box-sizing: border-box - 避免仅靠
border提示，叠加background-color或::after伪元素图标（需配合position: relative） - 测试时禁用所有 CSS 重置库（如 Normalize.css 的某些规则会干扰
:required的默认表现）
用 :required 配合 :valid/:invalid 做状态分层提示
单独用 :required 只能标出“该填”，不能反映“填没填”或“填对没”。真实场景需要组合判断：
-
input:required:not(:valid)→ 必填但为空或格式错（如邮箱没 @） -
input:required:valid→ 已填且合法（可用于绿色对勾反馈） - 注意：
:invalid在用户未交互前可能不触发（现代浏览器默认有:-webkit-autofill干扰，可加input:required:invalid:not(:placeholder-shown)更准）
示例：
input:required:not(:valid):not(:placeholder-shown) {
background-color: #fff8f8;
outline: 1px solid #e53e3e;
}
替代方案：当 :required 不够用时该怎么做
如果表单逻辑复杂（比如某字段“条件必填”），:required 属性本身无法动态切换，此时 CSS 伪类就失效了。必须靠 JS 控制 class：
- 监听
input或change事件，根据业务规则增删is-required类 - 用
[data-required="true"]这类自定义属性 + 属性选择器，比依赖原生required更灵活 - 服务端渲染时，直接输出
class="field-required"，避免前端 JS 判断延迟
别指望纯 CSS 解决所有“必填逻辑”，:required 只是标记静态声明，动态校验和提示始终要靠 JS 和语义化 class 协同。
