CSS如何根据表单元素的范围值改变颜色_使用:in-range与:out-of-range-css教程-PHP中文网

:in-range和:out-of-range仅对type="number"、"range"、"date"、"datetime-local"、"month"、"week"且含有效min/max属性的input及progress元素生效；text、select、textarea等不支持。

css如何根据表单元素的范围值改变颜色_使用:in-range与:out-of-range

:in-range 和 :out-of-range 只对设置了 min/max 属性的数字类表单元素生效，不是所有 input 都能用。

仅限带数值范围约束的原生控件：

input[type="number"]（必须有 min 或 max）
input[type="range"]（始终受 min/max 约束，默认 0–100）
input[type="date"]、input[type="datetime-local"]、input[type="month"]、input[type="week"]（需设 min/max）
progress 元素（根据 value 与 max 关系判断）

input[type="text"]、select、textarea 即使加了 pattern 或 JS 校验，也**不触发**这两个伪类——它们只看 HTML 原生范围属性，不看正则或运行时逻辑。

直接写 input:out-of-range { border-color: red; } 是最常用方式，但要注意三点：

样式只作用于该元素自身，无法通过 input:out-of-range + label 影响兄弟标签（label 不是紧邻后续兄弟时更不可靠）
如果元素初始值为空（value=""），且未设置 required，多数浏览器视为“未校验”，不会进入 :out-of-range 状态
input[type="range"] 的 :out-of-range 实际极少触发——因为拖动滑块本身就被限制在 min/max 内；只有通过 JS 强行赋值超出范围时才生效

推荐组合写法，增强视觉反馈：

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

下载

input:out-of-range {
  border-color: #c00;
  background-color: #ffebee;
  box-shadow: 0 0 6px rgba(204, 0, 0, 0.2);
}

这两个伪类纯属 CSS UI 状态标记，完全不阻断表单提交，也不影响 JS 的 checkValidity() 结果：

用户点击提交时，:out-of-range 元素仍可能通过（除非同时加了 required 或 min/max 且浏览器原生校验开启）
移动端 Safari 对 :out-of-range 的渲染延迟明显，有时输入后需失焦才更新样式
服务端和 JS 层仍必须独立验证——比如后端不能信任前端传来的 number 值，JS 也应调用 element.validity.rangeUnderflow 或 rangeOverflow 判断