CSS伪类:in-range与:out-of-range_数值范围验证的视觉反馈

:in-range和:out-of-range仅在设置了有效的min/max属性、且用户输入后触发浏览器原生校验时生效；js赋值需手动调用checkvalidity()刷新状态。

input[type=number] 的 :in-range 和 :out-of-range 什么时候生效

这两个伪类只对带 min 或 max 属性的 <input type="number">（或 range）起作用，且仅在用户输入后触发验证状态——不是实时监听值变化，而是依赖浏览器原生表单校验逻辑。比如 <input type="number" min="0" max="100"> 输入 -5 或 105 才会激活 :out-of-range。

常见错误现象：:in-range 在页面加载时就匹配，但实际值还没输；或者用 JS 改变 value 后样式没更新。这是因为伪类不响应 JS 赋值，只响应用户交互+校验结果。

• 必须显式设置 min/max，空属性或字符串值（如 min=""）无效
• type="text" 即使加了 min/max 也不会触发这两个伪类
• IE 完全不支持，edge 12+、chrome 10+、firefox 29+、safari 15.4+ 支持

怎么让 :out-of-range 样式真正“可见”

默认情况下，:out-of-range 匹配时浏览器不会自动高亮或报错，它只是个 css 钩子。你得自己写样式，比如加红框、改背景色，否则用户根本不知道输入越界了。

使用场景：表单实时反馈、数据录入页防错、配置面板数值约束提示。

立即学习“前端免费学习笔记（深入）”；

• 推荐组合 :out-of-range:focus 做聚焦态强化，避免干扰非活跃输入框
• 别只改边框色，加 outline: none 防止和默认焦点环打架
• 慎用 display: none 或 visibility: hidden —— 这会让元素脱离可访问性树，屏幕阅读器可能跳过

input[type="number"]:out-of-range {   border-color: #e53e3e;   background-color: #fff5f5; } input[type="number"]:out-of-range:focus {   box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2); }

step 属性会影响 :in-range/:out-of-range 判断吗

不影响。范围判断只看 value 是否落在 min～max 闭区间内，和 step 无关。但 step 会影响用户能通过点击上下箭头输入哪些值，间接改变触发时机。

例如：<input type="number" min="0" max="10" step="2">，输入 1 仍是 :out-of-range 吗？不——只要 1 ∈ [0,10]，就是 :in-range，哪怕它不符合 step 规则。此时浏览器会标记为 :valid 但 checkValidity() 返回 true，而 reportValidity() 不报错。

• step 只影响 :valid/:invalid，不影响 :in-range/:out-of-range
• 想同时约束步长和范围，得靠 JS + input 事件拦截，CSS 无能为力
• 设 step="any" 时，:valid 会更宽松，但范围伪类行为不变

为什么用 JS 设置 value 后 :in-range 样式不更新

因为浏览器只在用户输入、失去焦点（blur）、或调用 checkValidity() 时才重新计算范围状态。JS 直接改 input.value 不触发校验流程，伪类自然卡在旧状态。

解决办法很简单：手动触发一次校验，但注意别滥用，避免性能抖动。

• 设值后立刻调用 input.checkValidity()，它会强制刷新伪类匹配
• 不要用 input.reportValidity()，它会弹出提示框，干扰体验
• 如果批量操作多个 input，优先用 requestIdleCallback 批量触发 checkValidity

const input = document.querySelector('input[type="number"]'); input.value = '150'; input.checkValidity(); // 必须加这句，否则 :out-of-range 不生效

最常被忽略的是：这些伪类依赖浏览器内置的 number 类型解析逻辑，遇到非数字字符串（如 "abc"）时，valueAsNumber 是 NaN，此时既不匹配 :in-range 也不匹配 :out-of-range —— 它们只管数值范围，不管是否是有效数字。