:in-range 伪类仅对设置了 min/max 的 number/date/time 类型输入框生效，空值、text 类型或未设属性时均不触发；需配合 css 实时反馈与 js 校验协同使用。
input[type=number] 的 :in-range 为什么没反应
因为 :in-range 只对设置了 min 和/或 max 属性的表单控件生效，且仅在用户输入值落在该范围内时触发。没加属性、值是空字符串、或类型不是 number/date/time 等原生支持范围的类型，都不会匹配。
- 必须显式写
<input type="number" min="0" max="100">，不能只靠 JS 校验后加 class -
value属性初始为空时，:in-range不触发（空值既不算 in，也不算 out）；需用户输入后才计算 -
type="text"即使加了min/max，:in-range也无效——浏览器不解析文本框的数值范围
如何用 :in-range 和 :out-of-range 做实时视觉反馈
两者是互补伪类，适合构建“输入即反馈”的轻量校验 ui，比如绿色边框表示合法、红色抖动提示越界。关键在于样式层级和过渡控制，避免和 :focus/:invalid 冲突。
- 优先级建议：
input:in-range:not(:invalid)>input:out-of-range>input:invalid，防止:invalid覆盖掉范围状态 - 别直接给
:in-range加animation，它会在每次输入后反复触发；改用transition配合border-color或box-shadow - 移动端注意：ios safari 对
:in-range支持良好，但部分 android webview 版本（如旧版 chrome WebView）可能忽略该伪类
input:in-range { border-color: #28a745; box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2); } input:out-of-range { border-color: #dc3545; animation: shake 0.3s ease-in-out; } :in-range 和 JS checkValidity() 的关系
它们判断逻辑不同：:in-range 是纯 HTML 层面的范围检查（只看 min/max 和当前 value 字符串解析结果），而 checkValidity() 还会合并 required、pattern、自定义验证等所有约束。
- 一个
input可能:in-range为真，但checkValidity()返回false（比如值在范围内但为空且required） -
:in-range不响应 JS 修改value的行为（除非触发 input/change 事件），而checkValidity()每次调用都重新计算 - 不要用
:in-range替代 JS 提交前校验——它不保证最终提交值合法，只是 UI 辅助
容易被忽略的边界情况
:in-range 对浮点数、step 步长、空值、非数字字符的处理很“严格”，稍不注意就失效。
立即学习“前端免费学习笔记（深入）”；
-
step="0.1"时输入0.3可能被判定为:out-of-range，因为浮点精度导致内部比较失败；建议用step="any"或服务端兜底 -
min="1"+ 输入"01"（带前导零）：多数浏览器会解析为1，属于 in-range；但"1.0"在某些环境下可能被截断为1，也可能被拒 - 用户粘贴内容（如
"10abc"）会导致value为空字符串，此时既不匹配:in-range也不匹配:out-of-range，只能靠:invalid
浏览器不会把范围校验当“成功标识”自动打钩，它只是个 CSS 开关。真正可靠的反馈得靠组合使用：HTML 属性定规则、:in-range 做视觉提示、JS 做确定性判断。