如何通过CSS伪类:out-of-range实现即时的表单数值非法提醒？-css教程-PHP中文网

:out-of-range仅对含min/max属性的number/date/time等原生支持范围限制的input生效，且需html中显式声明；value越界时实时匹配，但非数字输入（如"abc"）属:invalid而非:out-of-range。

如何通过css伪类:out-of-range实现即时的表单数值非法提醒？

什么时候 `:out-of-range` 才会生效？

:out-of-range 只对带有 min、max 属性的 <input type="number">、<input type="date">、<input type="time"> 等原生支持范围限制的表单控件起作用。它不会响应 JavaScript 动态设置的 min/max（除非 DOM 属性同步更新），也不会作用于 type="text" 或自定义校验逻辑。

必须显式写入 HTML 属性，例如：<input type="number" min="1" max="100">
value 属性初始值超出范围时，:out-of-range 立即匹配（哪怕 input 还没聚焦）
用户输入后失焦（blur）或提交时，浏览器才触发原生验证，但伪类匹配是实时的（只要 value 值违反 min/max）

为什么写了样式却没反应？常见失效原因

最常踩的坑是：误以为 :out-of-range 能覆盖所有“非法值”场景，或忽略了 CSS 优先级与浏览器默认样式干扰。

没加 !important 时，Chrome/Edge 默认的 input:invalid 样式（比如红色边框）可能覆盖你写的 :out-of-range 样式
type="number" 输入非数字字符（如 "abc"）时，value 为空字符串，此时既不匹配 :in-range 也不匹配 :out-of-range——它属于 :invalid
Safari 对 :out-of-range 的支持较晚（iOS 15.4+ / macOS 12.3+），旧版本直接忽略该伪类

示例修复：

input:out-of-range {
  border-color: #e53e3e !important;
  box-shadow: 0 0 6px rgba(229, 62, 62, 0.3);
}

如何配合 JavaScript 实现真正的“即时提醒”？

:out-of-range 本身只控制样式，不触发提示、不阻止提交。要达成用户感知的“即时提醒”，需组合使用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

监听 input 事件（不是 change），实时读取 input.valueAsNumber 判断是否越界
若越界，手动添加 class（如 is-out-of-range），避免依赖伪类兼容性问题
同时调用 setCustomValidity() 配合 reportValidity() 控制原生验证消息显示时机

关键点：

input.valueAsNumber 返回 NaN 时说明输入非法字符，此时应归为 :invalid 处理，而非 :out-of-range
不要仅靠 :out-of-range 做提交拦截——必须在 submit 事件里用 checkValidity() 再校验一次

和 `:invalid`、`:in-range` 怎么分工？

三者定位不同，混用容易混乱：

:invalid：涵盖所有校验失败情况（空必填、类型错误、正则不匹配、min/max 越界、setCustomValidity("xxx")）
:out-of-range：专指数值/日期/时间类 input 的 min/max 越界，且值为合法类型（如 number 输入了 150，而 max=100）
:in-range：仅当值合法且在范围内才匹配，常用于“正常态”样式重置

实际建议：