如何利用HTML CSS的:in-range和:out-of-range伪类来显示数值输入框的状态？

本文共计929个文字，预计阅读时间需要4分钟。

：

为什么写了样式却没反应？

常见原因不是代码写错，而是条件没满足：

• min 或 max 缺失、值为空（如 min=""）或类型非法（如 min="ten"），伪类直接不匹配
• type 不是 "number" 或 "range" —— type="text" 即使加了 min/max 也完全无效
• 页面加载时 value 已超出范围，但浏览器尚未触发校验（比如没聚焦、没输入、没调用 checkValidity()）
• CSS 选择器优先级被其他规则覆盖，用开发者工具检查 computed 样式里是否被 override
• 旧版 Edge（

:in-range/:out-of-range 只响应用户交互，不响应 JS 赋值

这是最容易踩的坑：用 JS 直接设置 input.value = 200，样式不会更新。因为伪类依赖浏览器表单校验状态，而 JS 赋值不触发校验流程。

必须手动补一步：

立即学习“前端免费学习笔记（深入）”；

• 赋值后立即调用 input.checkValidity()（仅刷新状态，不弹提示）
• 或调用 input.reportValidity()（会弹原生错误气泡，适合提交前校验）
• 更稳妥的做法是：JS 改值 → dispatchEvent(new Event('input', { bubbles: true })) → 浏览器按用户输入逻辑重校验

怎么让提示真正有用？别只改边框色

单纯改 border-color 很难被注意，尤其在密集表单中。建议组合使用：

• 对 :out-of-range 加背景色 + 文字色 + box-shadow（例如 box-shadow: 0 0 0 2px #e53e3e33）
• 搭配 :out-of-range:focus 强化聚焦态，避免干扰未激活字段
• 用相邻兄弟选择器显示提示文字：#age:out-of-range + #age-hint::after { content: "需在 18–65 之间"; color: #e53e3e; }
• 务必加 outline: none 或重置 outline，否则和浏览器默认焦点环打架
• 禁用 display: none 或 visibility: hidden —— 这会让屏幕阅读器跳过该控件，破坏可访问性

range 类型的特殊行为：基本没实战价值

input[type="range"] 的值永远被浏览器强制限制在 min～max 内，哪怕 JS 尝试赋越界值（range.value = 200），读回来仍是截断后的合法值（如 "100"）。所以 :out-of-range 几乎永远不会匹配。

这意味着：

• 对 range 写 :out-of-range 样式，纯属冗余
• Firefox 不支持基于范围状态的轨道样式（::-moz-range-track 无法配合伪类条件渲染），只能靠 JS 动态加 class
• 真要控制滑块轨道颜色变化，得监听 input 事件 + 判断当前值 + 切换自定义 class

最常被忽略的一点：这两个伪类和 step 属性完全无关。范围判断只看数值是否落在 [min, max] 闭区间内，哪怕 step="2"，输入 1 仍算 :in-range —— 因为它合法，只是不符合步长约束。想拦住非步长值，必须用 JS 拦截 input 或 change 事件。