input[type="number"]:in-range仅在type="number"、min/max均为合法数字且value在[min,max]闭区间内时生效；常见失效场景包括缺失min/max、value非法、非number类型或safari旧版本bug。
input[type="number"]:in-range 什么时候真正生效
它只在三个条件同时满足时才匹配：type="number"、min 和 max 属性都存在且值为合法数字字符串（如 min="0"，不能是 min="" 或 min="auto"）、value 是可解析为数字的字符串且落在闭区间 [min, max] 内。
常见失效场景包括：
- 写了
input:in-range却没设min和max—— 浏览器压根不启动范围计算 -
value=""、value="abc"或value="15.5a"—— 这些既不触发:in-range，也不触发:out-of-range -
type="text"或自定义输入框 —— 伪类完全无效 - Safari ≤15.4 中对
type="date"或type="time"的:in-range支持缺失，但number类型全版本可用
为什么不能只靠 :in-range 做完整校验提示
:in-range 只反映「值是否在 min/max 闭区间内」，和「是否合法」无关。比如 step="1" 时输入 "10.5"，只要 min="0" max="20"，它仍匹配 :in-range，但会不匹配 :valid。
更关键的是，这两个伪类存在状态盲区：
- 空值、非法格式、未聚焦状态 → 两个伪类都不匹配
-
type="range"永远匹配:in-range（浏览器强制截断 value），无法用于超限反馈 - 用户粘贴超限值后，
:in-range状态可能延迟更新（需等input或blur事件）
所以纯 CSS 方案必须叠加 :invalid:not(:placeholder-shown) 覆盖非法输入，再用 JS 监听 input 事件调用 checkValidity() 补全逻辑。
边框色是最稳妥的 :in-range 视觉反馈方式
背景色容易被浏览器默认样式覆盖（尤其在 Windows Chrome 下），而边框几乎总能稳定呈现。推荐写法：
input[type="number"]:in-range {
border-color: #4CAF50;
outline: none;
}
input[type="number"]:out-of-range {
border-color: #f44336;
}
input[type="number"]:invalid:not(:placeholder-shown) {
border-color: #ff9800;
}
注意几点：
- 别用
:in-range控制显示/隐藏按钮或禁用交互——状态滞后会导致操作断层 - 不要对
:in-range使用transition，它不支持过渡动画；如需平滑效果，改用 JS 切换 class -
value="10"和value="20"（端点值）都算:in-range，这是闭区间行为，不是 bug
JS 动态修改 value 后 :in-range 状态会实时更新吗
会，只要新值是合法数字字符串且在范围内，CSS 状态立即重计算。但修改 min 或 max 属性后，部分浏览器（尤其是 Safari）需要元素重新聚焦再失焦才能刷新伪类状态。
更可靠的做法是：监听 input 事件，手动比对 el.valueAsNumber 与 parseFloat(el.min)、parseFloat(el.max)，再用 el.classList.toggle("in-range", inRange) 控制样式。这样既能绕过伪类限制，又能精准控制临界反馈（比如「接近 max 时变黄」这类需求）。
最易被忽略的一点：getComputedStyle(el).content 或 el.matches(":in-range") 都无法读取该伪类状态——你只能靠数值比对，而不是查询。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
