:out-of-range伪类仅对type="number"、"date"、"time"等原生支持范围约束的输入框生效，且必须显式设置合法min/max值；空值或非法格式触发:invalid而非:out-of-range。
为什么 :out-of-range 有时完全不生效
根本原因通常是表单控件没设 min 或 max 属性——:out-of-range 只对 <input type="number">、<input type="date">、<input type="time"> 这类**原生支持范围约束的类型**起作用，且必须显式声明边界值。比如 <input type="number"> 没写 min="0"，哪怕用户输了个 -5，伪类也不会激活。
- 只适用于
type="number"、"date"、"time"、"week"、"month"；type="text"或自定义校验无效 -
min/max值必须是合法格式：数字输入需为有效数字字符串（如"10"，不能是"10px"）；日期输入需符合YYYY-MM-DD格式 - 空值或非法输入（如字母混入 number 输入）触发的是
:invalid，不是:out-of-range
怎么用 CSS 高亮超出范围的数值框
直接写样式即可，但要注意优先级和浏览器兼容性。现代浏览器都支持，但 IE 完全不支持该伪类，如果需兼容旧环境，得靠 JS 补充判断。
- 基础写法：
input:out-of-range { border: 2px solid #e74c3c; } - 想同时覆盖聚焦状态：
input:out-of-range:focus { box-shadow: 0 0 6px rgba(231, 76, 60, 0.5); } - 避免被其他样式覆盖：建议加
!important（仅限紧急场景），更稳妥的是提升选择器权重，比如用input[type="number"]:out-of-range - 注意：Safari 在某些版本中对
:out-of-range的响应有延迟，输入后需失焦才触发，可配合input事件监听做即时反馈
:out-of-range 和 :invalid 的区别在哪
两者常被混淆，但语义和触发条件完全不同：:invalid 是表单验证失败的兜底状态，而 :out-of-range 是其中一种具体原因。
-
:out-of-range：仅当值存在且**落在min/max外**时匹配（例如min="1" max="10"，输入15） -
:invalid：覆盖更广——空值（且required）、格式错误（如type="number"输了"abc"）、超出范围、甚至自定义setCustomValidity()报错 - 实际开发中，
:out-of-range更精准，适合做“数值越界”专项提示；:invalid更适合全局错误态统一处理
JavaScript 怎么配合检测并提示
CSS 无法主动弹提示，真正要给用户明确反馈，JS 得介入。关键是别只依赖 change 事件——它要失焦才触发，体验滞后。
- 监听
input事件实时判断：el.addEventListener('input', () => {<br> if (el.validity && el.validity.rangeOverflow) {<br> el.setCustomValidity('不能超过最大值 ' + el.max);<br> } else if (el.validity && el.validity.rangeUnderflow) {<br> el.setCustomValidity('不能小于最小值 ' + el.min);<br> } else {<br> el.setCustomValidity('');<br> }<br>}); -
validity.rangeOverflow/rangeUnderflow是布尔值，比手动解析value更可靠（尤其涉及浮点、科学计数等边界） - 调用
setCustomValidity()后记得清空，否则后续提交会一直报错 - 注意：若用了
pattern或其他约束，validity对象可能同时多个字段为 true，需按需优先级处理
:out-of-range 看似简单，但真要稳稳落地，得同时盯住 HTML 属性是否写对、浏览器是否认这个伪类、JS 是否补上交互反馈——三者缺一，用户就可能在“看起来正常”的输入框里，默默输进一个系统根本不接受的值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
