为什么 :在范围内选择没有值的输入

Question

我尝试使用"：in-range"CSS伪类，我创建了一个没有值的数字类型的输入，我假设输入没有值，所以它应该是无效的或超出范围，但它选择了"：in-range"，这是正确的行为吗？ 我也用 JQuery 选择输入，它显示输入的空字符串，我认为空字符串不应该在我在代码中写的 5 到 10 之间。您对使用"：in-range"进行没有值的输入的建议。

$(function(){
$("#showVal").click(function(){
let val = $("#input").val();
alert(val);
});
});

input[type="number"]:out-of-range{
background-color:red;
}
input[type="number"]:in-range{
background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="number" min="5" max="10"/>
<button id="showVal">Show Value</button>

Answer 1

出于某种原因，:out-of-range不适用于空输入。 我的建议是也添加伪类:invalid。

无效的 CSS 伪类表示任何或其他 元素，其内容无法验证。

但是，输入必须设置为必需。
然后，如果输入为空，则会将其视为无效，并且可以应用相同的 CSS:out-of-range。

input[type="number"]:invalid{
background-color:red;
}

<input id="input" type="number" min="5" max="10" required />