如何利用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 赋值不触发校验流程。