如何用CSS设置输入字段的最大整数值？

Question

我可以在不使用JavaScript的情况下为数字字段设置一个最大值吗？我可以用纯CSS设置这种“验证”吗？谢谢你帮忙！

Answer 1

您需要在CSS上使用:out of range伪类，如下所示

<style>
input:out-of-range{
   background: red;
   color:#fff;
}
</style>

<input type="number" min="0" max="50" value="55">

Answer 2

：有效和:无效的CSS选择器可以用来指示表单值是否有效。但是您需要使用HTML5属性(如max/min或javascript )来进行验证。

HTML

<div class="form-control">
   <input type="text" required />
   <span class="bar"></span>
<label for="First Name">First Name</label>
</div>

CSS

input:valid ~ .bar:before, input:valid ~ .bar:after{
background:#2ecc71;  
}

input:invalid ~ .bar:before, input:invalid ~ .bar:after{
 background:#e74c3c;  
}

Answer 3

我认为您正在寻找max字段上的input属性。

<input type="number" max="20">

P.S. -它将input字段的值限制为最大值 20。但如果用户键入21或211，则不会限制。您需要使用JS来处理。当然，maxlength不适用于type"number"