Обычно поля типа number, или числовые поля, используют для указания количества товара в любом интернет-магазине или для изменения неких цифровых значений (температуры, веса, количества чего-либо). Стандартный их вид зависит целиком и полностью от браузера, поэтому для их стилизации нужно задействовать обычно дополнительные элементы в разметке либо вообще заменить такое поле другими html-элементами.
Классическое поле с цифрами
Поле <input type="number"> предполагает ввод цифр, о чем вы можете сообщить пользователю в атрибуте placeholder. Он будет виден до того, как вы добавите атрибут value или нажмете на одну из стрелок или удалите существующее в поле значение. Также по умолчанию вы будете изменять значение в поле на 1, начиная с 0, если отсутствует атрибут value.
Кроме того, можно задать дополнительные атрибуты в виде минимального (min) и максимального (max) значения и шага (step), который будет менять значение на определенную величину (по умолчанию это 1).
Атрибут required нужен для того, чтобы пользователь не забыл заполнить поле внутри формы с кнопкой типа submit. Соответствующее предупреждение о заполнении поля будет выведено перед отправкой формы.
В поле ниже использован такой код для <input type="number">:
| 1 2 3 4 | <input type="number" placeholder="Введите цифру"></p> <input type="number" placeholder="Введите цифру" value="1" min="0" max="20"> <input type="number" placeholder="step = 5" step="5" value="0" min="-20" max="20"> <input type="number" step="0.5" value="1" min="0" max="10"> |
Попробуйте изменить значения.
Предпочитаемые значения
Для полей типа number можно задать список с предпочитаемыми значениями с помощью элемента <datalist>.
| 1 2 3 4 5 6 7 8 | <input type="number" list="prefer-list"> <datalist id="prefer-list"> <option value="15"> <option value="22"> <option value="30"> <option value="35"> </datalist> |
Связь между input и datalist осуществляется с помощью указания в datalist id="prefer-list", а в input type="number" атрибута list с этим id.
Давайте посмотрим, как это работает:
Валидация полей типа number
Поскольку в поле типа number могут быть только цифры, ничего другого в него ввести у вас не получится. Такой атрибут, как pattern здесь не поддерживается, т.к. в нем нет необходимости - об этом позаботится браузер.
Попробуйте ввести какие-либо буквы или символы типа $, %, & и т.п. в любом из полей выше. Получается?
Псевдоклассы :valid и :invalid
Валидацию полей типа number можно провести с помощью псевдоклассов :valid и :invalid, которые доступны для всех элементов формы. Обычно какую-либо информацию выводят в элементах, размещенных в коде до или чаще после самого поля типа number, например в <span> или <label>:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <style> .number-valid { display: inline-block; vertical-align: middle; padding-left: 5px; font-size: 20px; font-weight: bold; } input[type="number"]:invalid+.number-valid::after { content: '\00d7'; color: red; } input[type="number"]:valid+.number-valid::after { content: "\2713"; color: green; } </style> <form> <p> <input type="number" step="5" min="0" max="100" required> <span class="number-valid"></span> </p> <p> <input type="number" step="5" min="0" max="100" required> <span class="number-valid"></span> </p> </form> |
Пример вживую:
Стилизация полей типа number
Стандартная стилизация полей типа number предполагает, что вы можете указать цвет фона и текста в поле, размер шрифта, свойство border и/или outline, border-radius и т.д. Такой пример вы найдете ниже.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> .number-style { background-color: #a7fde6; color: #333; padding: 10px; display: block; width: 120px; margin: 10px auto; box-sizing: border-box; border: 1px solid #ccc; border-radius: 3px; outline: none; font-size: 18px; } .number-style:focus { outline: 2px solid #00ffcb; box-shadow: 3px 3px 10px rgba(0,0,0,0.4); background-color: #eee; } </style> <div> <input type="number" class="number-style" step="0.5" value="1" min="0" max="10"> </div> |
Здесь вы можете протестировать стили:
Отключение стрелок
Стрелки появляются при наведении на числовое поле. Отключение стрелок в полях типа number нужно в том случае, если вы хотите заменить их на свои собственные элементы для увеличения/уменьшения числовых значений. Выполняется это так:
| 1 2 3 4 5 6 7 8 9 10 | input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { display: none; } |
То есть этими правилами мы говорим браузеру, что числовое поле становится текстовым и отключаем стрелки с помощью свойства display: none.
В примере ниже вы найдете наш стилизованный input, но уже без стрелок. Увеличивать/уменьшать значения можно с помощью стрелок вниз/вверх на клавиатуре.
Пример использования такой стилизации от Geoffrey Crofte.
See the Pen SMS 6 Digits One-Time-Code Input by Geoffrey Crofte (@GeoffreyCrofte) on CodePen.
Есть еще более простой способ отключить стрелки: достаточно просто добавить к элементу <input type="number"> атрибут readonly:
| 1 | <input type="number" value="10" readonly> |
Проверяем:
Ключевое отличие этого способа от предыдущего заключается в том, что атрибут readonly НЕ позволяет менять значения внутри числового поля с помощью стрелок. То есть предназначение атрибута readonly только для чтения говорит о том, что изменения в нем не подразумеваются.
Используем JS-методы stepUp() и stepDown() для изменения чисел в поле типа number
К сожалению, CSS-стили для стрелок пока нет, зато можно использовать специальные JS-методы stepUp() и stepDown() , чтобы изменить значения в числовом поле. Таким образом мы, скрыв стрелки, можем добавить свои кнопки (в примере мы будем использовать элементы <span>):
See the Pen JS arrows for type number by Elen (@ambassador) on CodePen.
Здесь атрибут readonly уже не мешает нам управлять значениями в числовом поле.
Стилизация полей типа number с заменой стандартных кнопок
В примере ниже вы найдете <input type="number">, однако кнопки в нем стилизованы уже с помощью дополнительных элементов + есть анимация "подпрыгивания" при смене значений.
See the Pen Counter on Hinges by Jon Kantner (@jkantner) on CodePen.
Замена полей типа number
Поле типа number можно заменить, задав вместо него некий элемент для плюса, минуса и цифры и добавив обработчики события click для plus и minus. Например, так:
See the Pen type number by Elen (@ambassador) on CodePen.
Здесь нет возможности ввести значение, т.к. нет собственно поля ввода. В разметке его заменяет обычный <span>.
Примеры стилизации и замены полей типа number
Ниже вы найдете несколько примеров различного использования числовых полей как в их стандартном виде, так и в стилизованном, а также варианты замены полей типа number другими элементами.
Использование стандартных полей для формирования размеров изображения. Автор Charles Ojukwu.
See the Pen Low Poly Background Generator by Charles Ojukwu (@cojdev)on CodePen.
Очень интересная стилизация от числовых полей от Tomasz Stryjewski.
See the Pen a knob by tomasz stryjewski (@stryju) on CodePen.
Пример использования стандартного поля типа number и дополнительных кнопок от Burlaka Dmytro. Для просмотра вам нужно сначала добавить товар в корзину кликом по кнопке "Add to Cart", а затем посмотреть корзину кликом на кнопке "Cart".
See the Pen Shopping cart JS by Burlaka Dmytro (@Dimasion) on CodePen.
Анимационная смена значений для изменения фонового цвета в body от Viesturs Marnauza.
See the Pen An animated number stepper by Viesturs Marnauza (@viestursm) on CodePen.
Стилизация числовых полей на основе разметки Bootstrap 5 от Anita.
See the Pen increment and decrement input with bootstrap 5 by Elen (@ambassador) on CodePen.
Обработка событий для поля типа number от Yair Even Or
See the Pen Input type number printed using locale by Yair Even Or (@vsync) on CodePen.
Соотношение сторон формата А4 с помощью полей типа number от Nikita Malyshev. Скрипт пригодится, если вам нужно высчитать стороны с определенным коэффициентом соотношения.
See the Pen A4 pixeal ratio calculator by Nikita Malyshev (@Niklan) on CodePen.
Пример анимационной смены значений при клике на цифры от Jon Kantner.
See the Pen Sliding Stepper by Jon Kantner (@jkantner) on CodePen.
Замена полей типа number
Замена поля типа number может быть с анимацией, как в примере ниже (автор Prasenjit Nayak). Здесь при каждом клике происходит плавная заливка внутреннего пространства + цвет с зеленого меняется на красный, если значение увеличивается до 8 и более.
See the Pen Animated Number Spinner by Prasenjit Nayak (@StarKnightt) on CodePen.
Использование стандартный числовых полей и их замена с анимацией от Irko Palenius
Здесь используется код, основанный на Vue.js.
See the Pen Vue.js touch input by Irko Palenius (@ispal) on CodePen.
Замена числовых полей в корзине с товарами, реализованная на Vue.js. Автор OlgaKoplik.
See the Pen Vue.js Shopping Cart by Olga (@OlgaKoplik) on CodePen.
