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

【问题标题】：How to set max integer value of input field by CSS?如何通过 CSS 设置输入字段的最大整数值？
【发布时间】：2018-10-02 06:52:13
【问题描述】：

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

【问题讨论】：

不，你不能，因为这样的限制一开始就不是“格式化”，而是逻辑。

标签： css validation web frontend

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;  
}

【讨论】：

【解决方案3】：

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

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

附注- 将input字段的值限制为最大 20。但不会限制用户键入21或211。您需要使用JS处理强>。当然，maxlength 不适用于 type"number"

【讨论】：