Как установить максимальное целочисленное значение поля ввода с помощью CSS?

Question

Можно ли установить максимальное значение для числового поля без использования JavaScript?Могу ли я установить этот вид «проверки» с помощью чистого CSS?Спасибо за помощь!

Answer 1

: допустимые и: недействительные 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 2

Вам нужно использовать :out of range псевдокласс на вашем CSS, как показано ниже

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

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

Answer 3

Я думаю, вы ищете атрибут max в поле input.

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

PS - Это ограничит значение поля input значением максимум 20. Но не будет ограничивать, если пользователь наберет 21 или 211. Это необходимо обработать с помощью JS .И, конечно же, maxlength не работает на type"number"