CSS :in-range和:out-of-range伪类：数字输入范围提示

要使用:in-range和:out-of-range伪类，首先在html中为<input type="number">设置min和max属性；1. 然后通过css分别为:in-range和:out-of-range状态定义样式，如边框、背景色等；2. 可结合javascript实现动态交互，例如启用提交按钮或显示提示信息；3. 注意兼容性问题，主流浏览器支持良好，但需考虑老版本浏览器的兼容处理；4. 初始值为空时可能不触发样式，可通过js初始化或css默认样式解决；5. 若范围动态变化，需用js更新样式。

:in-range 和 :out-of-range 这两个 CSS 伪类，能让你根据 <input type="number"> 元素的当前值是否在 min 和 max 属性定义的范围内，来应用不同的样式。简单来说，就是给你的数字输入框加上范围提示，让用户一眼就知道输的值对不对。

利用 :in-range 和 :out-of-range，你可以提供即时反馈，增强用户体验，减少提交错误数据的可能性。

如何使用 :in-range 和 :out-of-range？

直接上例子，假设我们有一个输入框，要求输入 1 到 10 之间的数字：

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

<input type="number" id="quantity" name="quantity" min="1" max="10">

然后，我们可以用 CSS 来定义范围内的样式和超出范围的样式：

input[type="number"]:in-range {
  border: 2px solid green; /* 范围内，绿色边框 */
}

input[type="number"]:out-of-range {
  border: 2px solid red; /* 超出范围，红色边框 */
}

这样，当用户输入的数字在 1 到 10 之间时，输入框会显示绿色边框；超出这个范围，就会显示红色边框。是不是很直观？

:in-range 和 :out-of-range 的兼容性怎么样？

虽然这两个伪类挺好用，但也要注意兼容性。主流浏览器，比如 Chrome、Firefox、Safari 和 Edge，都支持 :in-range 和 :out-of-range。但对于一些老版本的浏览器，可能就不支持了。在使用的时候，最好做一下兼容性处理，或者使用一些 polyfill 来保证在所有浏览器上都能正常工作。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

除了边框，还能用 :in-range 和 :out-of-range 做什么？

除了改变边框颜色，你还可以用 :in-range 和 :out-of-range 来改变背景颜色、文字颜色、显示不同的提示信息，甚至使用 JavaScript 来动态地添加或移除元素。

例如，你可以添加一个提示信息：

<input type="number" id="age" name="age" min="18" max="65">
<span id="age-message"></span>

#age:out-of-range + #age-message::after {
  content: "年龄必须在 18 到 65 岁之间！";
  color: red;
}

#age:in-range + #age-message::after {
  content: ""; /* 清空提示 */
}

这个例子中，当年龄超出 18 到 65 岁范围时，会显示错误提示信息。

:in-range 和 :out-of-range 与 JavaScript 结合使用有什么技巧？

有时候，纯 CSS 的样式可能不够灵活。你可以结合 JavaScript 来实现更复杂的效果。比如，你可以监听输入框的 input 事件，然后根据 :in-range 和 :out-of-range 的状态来动态地改变页面上的其他元素。

const ageInput = document.getElementById('age');
const submitButton = document.getElementById('submit-button');

ageInput.addEventListener('input', () => {
  if (ageInput.checkValidity()) {
    submitButton.disabled = false;
  } else {
    submitButton.disabled = true;
  }
});

这个例子中，只有当年龄输入框的值在有效范围内时，提交按钮才会启用。checkValidity() 方法会检查输入框的值是否符合 min 和 max 的限制。

如何处理 :in-range 和 :out-of-range 的一些常见问题？

• 初始状态问题： 默认情况下，如果输入框没有值，:in-range 和 :out-of-range 可能不会生效。你可以使用 JavaScript 来初始化输入框的值，或者使用 CSS 来设置默认样式。
• 动态范围问题： 如果 min 和 max 的值是动态变化的，你需要使用 JavaScript 来动态地更新 CSS 样式。
• 用户体验问题： 确保提示信息清晰易懂，避免给用户带来困惑。可以使用不同的颜色、图标或者动画来增强用户体验。

总的来说，:in-range 和 :out-of-range 是两个非常实用的 CSS 伪类，可以让你轻松地实现数字输入范围的提示功能。合理地使用它们，可以大大提高用户体验，减少错误数据的提交。

以上就是CSS :in-range和:out-of-range伪类：数字输入范围提示的详细内容，更多请关注php中文网其它相关文章！