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

：valid和：invalid CSS选择器可用于指示表单值是否有效。但是您将需要诸如max / min或javascript这样的HTML5属性来进行验证。

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"

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

3 个答案: