要使用: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 来保证在所有浏览器上都能正常工作。
除了边框，还能用 :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 伪类，可以让你轻松地实现数字输入范围的提示功能。合理地使用它们，可以大大提高用户体验，减少错误数据的提交。
