必须同时设置 min 和 max 属性，如 inputtype="number"[max]:in-range { border: 2px solid green; }，否则伪类不触发；空值、非法格式或未聚焦时两者均不匹配，仅合法值在闭区间内才激活 :in-range。
怎么用 :in-range 给 <input type="number"> 加边框
:in-range 只对有 min 和 max 属性的表单控件生效，且仅限 type="number"、type="date"、type="time" 等原生支持范围验证的类型。它不会作用于 type="text" 或自定义范围逻辑的输入框。
常见错误是直接写 input:in-range { border: 2px solid green; } 却没加 min/max，结果样式完全不触发——浏览器根本不会计算“是否在范围内”，因为没定义范围。
- 必须同时设置
min和max（哪怕只是占位，如min="0" max="100"） - 值必须是合法数字或对应类型的可解析值（
date类型需为YYYY-MM-DD格式） - 空值、非数字输入、超出格式的日期（如
"2024-13-01"）均视为:out-of-range，不是:in-range
:in-range 和 :out-of-range 的行为边界在哪
这两个伪类互斥但不覆盖全部状态：当输入为空、无效格式（如字母填进 number）、或未聚焦时，元素既不匹配 :in-range 也不匹配 :out-of-range。只有用户输入了合法值，且该值落在 min–max 闭区间内，才会激活 :in-range。
例如：<input type="number" min="10" max="20" value="15"> 初始就匹配 :in-range；而 value="abc" 或 value="" 时，两个伪类都不生效。
立即学习“前端免费学习笔记（深入）”；
-
value="10"和value="20"都算:in-range（闭区间） -
step不影响:in-range判定，只影响可选值和验证逻辑 - JavaScript 动态修改
value会实时触发伪类重计算，但修改min/max后需重新聚焦再失焦才能刷新状态（部分浏览器有延迟）
兼容性坑：Safari 15.4 之前不支持 :in-range 在 date 和 time 上
虽然所有现代浏览器都支持 number 类型的 :in-range，但 Safari 对 date 和 time 的支持直到 15.4 才补全。低版本 Safari 下，input[type="date"]:in-range 样式完全无效，且不会报错。
如果项目需兼容旧 Safari，别依赖 :in-range 做关键视觉反馈。可用 JS 监听 input 事件 + checkValidity() 模拟，但要注意：原生 :in-range 是 CSS 层面的即时响应，JS 方案总有微小延迟。
- 检测方式：
document.querySelector('input[type="date"]').matches(':in-range')在旧 Safari 返回false（即使值合法） -
number类型在 Safari 12+ 已稳定支持，无需降级 - 不要混用
:in-range和:valid：前者只看范围，后者还检查必填、格式、自定义pattern
为什么不能用 :in-range 替代表单验证逻辑
:in-range 是纯展示层信号，它不阻止提交，不触发 constraint validation API 错误，也不影响 form.reportValidity() 结果。用户仍可提交一个 :in-range 但 required 为空的字段，或绕过样式直接发请求。
典型误用：只靠边框变色就认为“用户已输对”，结果后端收到非法值。样式只是辅助，验证必须落在 HTML 属性（required, min, max）或 JS 层。
-
:in-range匹配时，element.validity.rangeOverflow和.rangeUnderflow仍可能为true（比如值超限但未触发重绘） - 服务端永远要重复校验，前端样式只是降低用户出错概率
- 移动端软键盘可能不暴露
number类型的上下箭头，用户仍可粘贴非法值，此时:in-range会滞后甚至失效
