:in-range和:out-of-range仅在设置了有效的min/max属性、且用户输入后触发浏览器原生校验时生效；JS赋值需手动调用checkValidity()刷新状态。
input[type=number] 的
和
什么时候生效
这两个伪类只对带
或
属性的
（或
）起作用，且仅在用户输入后触发验证状态——不是实时监听值变化，而是依赖浏览器原生表单校验逻辑。比如
输入 -5 或 105 才会激活
。
常见错误现象：
在页面加载时就匹配，但实际值还没输；或者用 JS 改变
后样式没更新。这是因为伪类不响应 JS 赋值，只响应用户交互+校验结果。
必须显式设置
/
，空属性或字符串值（如
）无效
即使加了
/
也不会触发这两个伪类
IE 完全不支持，Edge 12+、Chrome 10+、Firefox 29+、Safari 15.4+ 支持
怎么让
样式真正“可见”
默认情况下，
匹配时浏览器不会自动高亮或报错，它只是个 CSS 钩子。你得自己写样式，比如加红框、改背景色，否则用户根本不知道输入越界了。
使用场景：表单实时反馈、数据录入页防错、配置面板数值约束提示。
立即学习
“
前端免费学习笔记（深入）
”；
推荐组合
做聚焦态强化，避免干扰非活跃输入框
别只改边框色，加
防止和默认焦点环打架
慎用
或
—— 这会让元素脱离可访问性树，屏幕阅读器可能跳过
属性会影响
/
判断吗
不影响。范围判断只看
是否落在
～
闭区间内，和
无关。但
会影响用户能通过点击上下箭头输入哪些值，间接改变触发时机。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
例如：
，输入 1 仍是
吗？不——只要 1 ∈ [0,10]，就是
，哪怕它不符合
规则。此时浏览器会标记为
但
返回
，而
不报错。
只影响
/
，不影响
/
想同时约束步长和范围，得靠 JS +
事件拦截，CSS 无能为力
设
时，
会更宽松，但范围伪类行为不变
为什么用 JS 设置
后
样式不更新
因为浏览器只在用户输入、失去焦点（
）、或调用
时才重新计算范围状态。JS 直接改
不触发校验流程，伪类自然卡在旧状态。
解决办法很简单：手动触发一次校验，但注意别滥用，避免性能抖动。
设值后立刻调用
，它会强制刷新伪类匹配
不要用
，它会弹出提示框，干扰体验
如果批量操作多个 input，优先用
批量触发
最常被忽略的是：这些伪类依赖浏览器内置的 number 类型解析逻辑，遇到非数字字符串（如
）时，
是
，此时既不匹配
也不匹配
—— 它们只管数值范围，不管是否是有效数字。
:in-range:out-of-rangeminmaxrange:out-of-range:in-rangevalueminmaxmin=""type="text"minmax:out-of-range:out-of-range:out-of-range:focusoutline: nonedisplay: nonevisibility: hiddeninput[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-rangevalueminmaxstepstep:out-of-range:in-rangestep:validcheckValidity()truereportValidity()step:valid:invalid:in-range:out-of-rangeinputstep="any":validvalue:in-rangeblurcheckValidity()input.valueinput.checkValidity()input.reportValidity()requestIdleCallbackcheckValidityconst input = document.querySelector('input[type="number"]');
input.value = '150';
input.checkValidity(); // 必须加这句，否则 :out-of-range 不生效"abc"valueAsNumberNaN:in-range:out-of-range