怎样在CSS中使用:in-range伪类限制数字输入框取值范围-css教程-PHP中文网

:in-range 伪类仅在 input 设置了 min/max 属性且值为有效数字时生效，输入超限或为空/非法值时不匹配，需结合 js 校验确保完整性。

怎样在css中使用:in-range伪类限制数字输入框取值范围

为什么 `:in-range` 在数字输入框上没反应？

因为 :in-range 只对设置了 min 和/或 max 属性的表单控件生效，且仅作用于原生支持范围验证的类型（如 type="number"、type="date"）。如果只写了 CSS 但 HTML 中没设 min/max，样式永远不会触发。

常见错误现象：:in-range 样式完全不生效，控制台无报错，开发者工具里也看不到该伪类被匹配。

必须用 <input type="number" min="0" max="100"> 这类结构，缺一不可
min 和 max 值需为有效数字（不能是字符串如 "0" —— 虽然浏览器会尝试转换，但建议写纯数字）
用户手动输入超限值（如输 150）时，:in-range 立即失效；删到 100 以内又恢复

`:in-range` 和 `:out-of-range` 是互斥的吗？

是，但要注意它们只反映当前输入值是否落在 min/max 定义的闭区间内，不校验是否为合法数字格式。比如输入 "abc" 或空值，两个伪类都不匹配 —— 此时元素既不在范围内，也不在范围外，而是“未验证状态”。

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

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

下载

输入 50（在 0–100 内）→ 触发 :in-range
输入 120 → 触发 :out-of-range
输入 ""（空）或 "x" → 两个伪类都无效，回退到默认样式
若只设了 min="10" 没设 max，则 5 触发 :out-of-range，15 触发 :in-range，"" 仍无匹配

怎样配合 JavaScript 做更可靠的范围反馈？

CSS 伪类响应快、无需 JS，但无法覆盖所有边界情况（比如空值、非数字输入、初始值未校验）。建议用 checkValidity() + validity.rangeOverflow/rangeUnderflow 补充判断。

const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
  if (input.validity.rangeUnderflow) {
    input.setCustomValidity('不能小于最小值');
  } else if (input.validity.rangeOverflow) {
    input.setCustomValidity('不能大于最大值');
  } else {
    input.setCustomValidity('');
  }
});

:in-range 适合做视觉微调（如边框变绿），但别依赖它做唯一校验
提交前务必调用 form.checkValidity()，否则用户可能绕过样式直接提交
注意 Safari 对 :in-range 的支持从 iOS 15.4 / macOS 12.3 才稳定，旧版本会静默忽略