设置min/max的number输入框默认触发in-range绿色高亮如何解决

问题原因 #

• type="number" 类型的输入框默认值为空时，按照HTML5规范不会命中:out-of-range伪类，浏览器默认空值不属于超出范围的状态
• 现有代码中的input[type="number"]:not(:focus):in-range选择器会命中未聚焦、值为空的输入框，因此默认就显示绿色边框

修复方案 #

核心逻辑是新增:placeholder-shown伪类排除空值状态，只有当用户已经输入内容（占位符隐藏）时，才触发范围对应的边框样式。你可以补充默认边框样式避免空值时继承浏览器默认边框，修改后的完整CSS代码如下：

/* 补充默认边框样式，可根据需求调整颜色 */
input {
    border: 3px solid #ddd;
}

input:focus {
    border: 3px solid lightslategray;
}

input[type="number"]:not(:focus):not(:placeholder-shown):out-of-range {
    border: 3px solid red;
}

input[type="number"]:not(:focus):not(:placeholder-shown):in-range {
    border: 3px solid green;
}

如果需要兼容极旧版本不支持:placeholder-shown的浏览器，也可以给input标签添加required属性，利用空值会命中:invalid伪类的特性来排除空值状态，对应范围选择器调整为:not(:focus):not(:invalid):in-range即可。

内容的提问来源于stack exchange，提问作者Duan Jogun