:in-range 未生效是因为未设置 min 和 max 属性，且 value 初始为空时伪类不触发；它仅在合法值存在时匹配，不阻止非法输入，也不替代 JS 或后端校验。
为什么 :in-range 在数字输入框上没反应？
因为 :in-range 只对带有 min 和 max 属性的表单控件生效，且仅当用户输入值落在该范围内时才匹配——但它本身不阻止非法输入，也不触发验证。常见错误是只写 CSS 却没给 <input type="number"> 加 min/max，导致伪类永远不激活。
- 必须同时设置
min和max（哪怕其中一个设为极值，如min="0"且无max，:in-range仍不工作） -
value属性初始为空或未设置时，浏览器视为“未输入”，此时既不匹配:in-range也不匹配:out-of-range - 用户手动输入超出范围的数字（如输入
999但max="100"），该元素会立即匹配:out-of-range，但不会自动修正 value；:in-range只在合法值存在时才起作用
:in-range 和 :out-of-range 的样式优先级怎么调？
这两个伪类权重相同，但 :out-of-range 更常被需要（提示错误），所以建议把 :in-range 当作“确认态”来用，比如高亮合法输入。注意：它们无法覆盖浏览器默认的红色边框（Chrome/Firefox 对 :invalid 的渲染），除非显式重置 outline 或 border。
- 避免用
!important，改用更具体的选择器，例如input[type="number"]:in-range - 若同时定义了
:valid和:in-range，后者优先级更高（因伪类链更长），但实际中两者常一致——只要min/max存在且 value 合法，二者都会匹配 - 移动端 Safari 对
:in-range支持较晚（iOS 15.4+），旧版本会直接忽略
如何让 :in-range 提示真正有用？
单纯变色意义有限，关键是要配合交互反馈。比如结合 :focus 显示辅助文字，或用 JS 监听 input 事件动态更新提示文案。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- CSS 示例：
input[type="number"]:in-range { border-color: #4CAF50; }<br>input[type="number"]:out-of-range { border-color: #f44336; } - 不要依赖它做数据校验——后端/JS 仍需检查，因为用户可绕过（如禁用 JS、修改 DOM）
- 如果需要实时反馈，监听
input事件比依赖伪类更可靠：el.addEventListener('input', () => { if (el.value >= el.min && el.value
为什么 range 类型的滑块不响应 :in-range？
<input type="range"> 永远处于其 min–max 范围内，用户拖动时 value 不可能越界，因此 :in-range 恒为 true，:out-of-range 永不匹配。这个伪类对 range 输入框没有实际意义。
立即学习“前端免费学习笔记（深入）”；
- 想控制滑块样式，用
::webkit-slider-thumb或::moz-range-thumb等伪元素 - 若需限制滑块可选值（如只允许整数步进），应使用
step属性而非依赖伪类 - 误以为
:in-range能防止用户拖出范围——它不能，也无需防止
实际项目里最容易漏掉的是初始化 value 和 min/max 的同步；哪怕 HTML 写对了，JS 动态设置 value 后忘了同步 setAttribute("min", ...)，伪类就会失效。
