:out-of-range伪类仅在type为number/date/time、已设置合法min/max且值为有效数字并明确超限时才触发视觉反馈；不响应JS赋值、不阻止提交、不能替代JS或后端校验，常见失效原因包括未设min/max、type不符或min/max值非法。
:out-of-range 伪类本身不“处理”越界，它只在满足严格条件时提供视觉反馈；不能替代 JS 校验，也不能阻止提交。
为什么写了 :out-of-range 样式却完全没反应
几乎总是以下三点之一：
-
input没设min或max属性（哪怕只写一个也必须写） -
type不是"number"、"date"、"time"等原生支持范围的类型；type="text"加了min="0"也完全无效 -
min/max值非法，比如min=""、min="ten"、min="10px"—— 浏览器解析失败，伪类直接不匹配
调试方法：打开 DevTools，在 Elements 面板里手动把 value 改成超界值（如 value="200"），再看该元素是否被标记为 :out-of-range 状态。
:out-of-range 和 :invalid 必须分开用
二者语义和触发路径完全不同，混用会导致样式错乱或提示缺失：
立即学习“前端免费学习笔记（深入）”；
-
:out-of-range只在值是合法数字、且明确落在[min, max]闭区间外时匹配（例如min="1" max="10"，输入15） -
:invalid范围更广：空值（配合required）、格式错误（如type="number"输入"abc"）、越界、甚至setCustomValidity("xxx")都会命中
推荐组合写法：input:invalid:not(:out-of-range) 处理格式错误，input:out-of-range 单独高亮越界值，避免互相覆盖。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
怎么写出真正能被用户注意到的警告样式
单靠 border-color: red 在密集表单中极易被忽略。实际可用的组合包括：
- 边框 + 背景 + 阴影：
border-color: #e53e3e; background-color: #fff5f5; box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2); - 用相邻兄弟选择器显示提示文字：
#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }（注意#age-hint必须紧跟在input后且不可display: none） -
input:out-of-range:focus单独强化聚焦态，但必须重置默认outline，否则和浏览器焦点环打架 - 绝对不要用
display: none或visibility: hidden隐藏越界输入框——这会让屏幕阅读器跳过，破坏可访问性
JS 赋值后 :out-of-range 不更新怎么办
直接通过 JS 设置 input.value = "150"，哪怕超出 max="100"，样式也不会变。因为浏览器不把 JS 赋值当作用户交互，不触发原生校验流程。
必须补一步操作：
- 调用
input.checkValidity()（只刷新状态，不弹提示） - 或调用
input.reportValidity()（会弹原生气泡，适合提交前） - 更贴近真实行为的做法：
input.dispatchEvent(new Event('input', { bubbles: true }))
特别注意：input[type="range"] 几乎永远不触发 :out-of-range，因为它的值会被浏览器自动截断到 [min, max] 内，JS 赋越界值也读不到原始非法值。
最易被忽略的是 Safari 兼容性 —— :out-of-range 在 Safari v15.4 之前完全不生效；iOS 软键盘对 type="number" 支持不一，可能允许粘贴字母，此时走的是 :invalid 流程，:out-of-range 根本不会触发。
