css3的:out-of-range和:in-range伪类是专门作用于数值类表单元素的伪类选择器，它们可以基于元素设置的min和max属性范围，自动匹配用户输入值的对应状态，无需额外编写JavaScript逻辑就能实现范围相关的样式反馈。
两个伪类的基本作用
:in-range伪类会匹配输入值处于min和max设定范围内的数值表单元素，:out-of-range伪类则会匹配输入值超出设定范围的元素。这两个伪类仅对设置了min和max属性的<input type="number">、<input type="range">等数值类型的表单元素生效，普通文本输入框或其他未设置范围属性的元素不会触发这两个伪类的匹配。
适用场景说明
这两个伪类最常见的使用场景是表单输入的范围校验提示，比如年龄输入限制1到120岁、商品价格输入限制0到10000元等场景，当用户输入不符合要求时，自动改变输入框的边框颜色、背景色或者添加提示文本，让用户直观感知输入是否合法，减少表单提交后的校验压力。
代码示例演示
下面的示例实现了一个年龄输入框，当输入值在1到120之间时输入框边框显示绿色，超出范围时显示红色，同时搭配提示文本的样式变化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:out-of-range和:in-range示例</title>
<style>
/* 基础输入框样式 */
.age-input {
width: 200px;
height: 40px;
padding: 0 10px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}
/* 输入值在范围内时的样式 */
.age-input:in-range {
border-color: #28a745;
}
/* 输入值超出范围时的样式 */
.age-input:out-of-range {
border-color: #dc3545;
}
/* 提示文本基础样式 */
.tip-text {
font-size: 14px;
margin-top: 8px;
color: #666;
}
/* 输入值在范围内时的提示文本 */
.age-input:in-range + .tip-text {
color: #28a745;
}
/* 输入值超出范围时的提示文本 */
.age-input:out-of-range + .tip-text {
color: #dc3545;
}
</style>
</head>
<body>
<div class="form-group">
<label for="age">请输入年龄：</label>
<input
type="number"
id="age"
class="age-input"
min="1"
max="120"
placeholder="1-120之间的整数"
>
<p class="tip-text">请输入1到120之间的年龄数值</p>
</div>
</body>
</html>
在上面的代码中，输入框设置了type="number"、min="1"和max="120"属性，当用户在输入框中输入1到120之间的数值时，:in-range伪类生效，输入框边框变为绿色，提示文本也变为绿色；当输入小于1或者大于120的数值时，:out-of-range伪类生效，输入框边框变为红色，提示文本变为红色。
注意事项
- 这两个伪类仅对设置了min和max属性的数值类型表单元素生效，如果元素没有设置这两个属性，或者input的类型不是数值类，伪类不会匹配。
- 伪类的匹配状态会随着用户输入实时变化，不需要额外编写JavaScript监听输入事件来修改样式，性能更优。
- 部分旧版本浏览器可能存在兼容性差异，实际使用前可以根据项目需求做兼容性检测。
css3:out-of-range:in-range表单验证伪类选择器修改时间：2026-06-24 23:03:38