Input type number css

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 538a6dee5f52c27c • Your IP : 78.85.5.224 • Performance & security by Cloudflare

Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или что-то на подобие того.

Для начала уберем стандартные стрелки. “Кстати, красивые стрелки” – это я погорячился, суть задачи в том, чтобы просто сделать какие-то отдельные от инпута стрелки, а красивыми их уже сможет сделать каждый сам себе с учетом своего видения красивого.

CSS-стили для input[type=number]

Такой примитивный HTML-код (это упрощенный код из магазина на WooCommerce)

Такой примитивный JS-Скрипт с использованием jQuery:

Не забываем подключить jQuery

Рабочий пример на CodePen:

Комментарии (34) к “Как стилизовать стрелки для input[type=number]”

Дмитрий

Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября – find(".qty"); скорее всего поиск инпута ?))

Denis Creative

Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс .quantity-num , и этот же класс используется в скрипте.

Denis Creative

Я поменял код в скрипте, так что аккуратно.

Владимир

Доброго времени суток!
Все работает.
Но при нажатии на “+” – нажимаются обе кнопки и “+” и “-“.
При нажатии кнопки “-” – все норм.
Подскажите как исправить. Код не менял, вставил как копипастом.

Denis Creative

Проверьте, чтобы правильно были указаны классы для кнопок:

и, чтобы правильно были заданны переменные для этих кнопок:

Владимир

Спасибо за быстрый ответ!
Проверил, все правильно указано.
Вот мой код, может вы увидите где ошибка:

Владимир

Еще заметил момент у меня – при клике на поле ввода мышкой, нажимается также и кнопка “-” каждый раз…
Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.

Denis Creative

Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями

Владимир

Хорошо. Уже завтра тогда.

Владимир

Добрый день.
Вот выложил на codeopen свой код.
Но так нет проблемы – одновременное нажатие кнопки “минус”, когда нажимаешь кнопку “плюс”.
Но зато появилась новая трабла (на сайте у меня тоже она есть) – если таких инпутов несколько, то при нажатии на “плюс” одного инпута – срабатывают все.
Помогите разобраться, пожалуйста.
https://codepen.io/vovaent/pen/bMOxYG/

Denis Creative

Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так – https://codepen.io/deniscreative/pen/bMOmGe

В функциях quantityMinus() и quantityPlus() переменная числового поля $quantityNum задается только возле кнопки, на которую нажали:

А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.

Владимир

Понял. Спасибо за помощь. Буду разбираться.

Владимир

Я вас еще не замучал вопросами?))
Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку.
Поможете?

Сергей

Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так:

Владимир

А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать – то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.

Denis Creative

Владимир

Благодарю Вас!
Все работает!
Осталась, конечно, индивидуальная проблема в том, что при кликах на “+” происходит анимация нажатия и “-” одновременно.
В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют…
Их можно как-то проверить на совместимость, кроме консоли в браузере?

Denis Creative

Или дайте ссылку или отключайте скрипты по очереди, проверяйте

Владимир

В исходном примере для одного инпута, нормально минусует и плюсует.

Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github https://github.com/igrok666/numberPlugin

Denis Creative

Чем этот плагин лучше кода описанного в статье?
По мне, так плагин совсем не гибкий и не очень удобный, под свой дизайн нужно много чего менять.

я не говорю что он лучше, просто сделал может кому то понадобится, а то что он ещё не очень гибкий ну над этим работаю ещё в свободное время, а под дизайн ты любой плагин будешь менять, мне ещё не разу не попадалось такого что сразу плагин подходил под макет

JS можно было б и по универсальнее сделать.
Да и батоны закрыть от срабатывания в формах…
Как-то так:

Denis Creative

По поводу “батоны закрыть от срабатывания в формах” согласен.
По поводу “сделать универсальнее”, в вашем коде появилось много операторов if , и мне он не кажется сильно универсальным.
В вашем примере, при количестве равном “0”, кнопки перестанут работать.

Алексей

При первом клике по кнопку + или – не срабатывает.
При нажатии на кнопку +, а потом на кнопку – ,минус сначала прибавляет значение, а потом начинает убавлять.

Denis Creative

Все работает правильно, в данном примере не может быть число менее 1, так как пример сделан для интернет-магазина для карточки товара.
Немного изменив код, можно допустить и минусовые значения.

Сергей

А если будет несколько таких элементов в форме? Тогда при клике на на разный input значение будет меняться только у одного input.

Denis Creative

Ну так вам ничего не мешает немного подправить код под свои задачи. В статье просто приведен пример, который можно уже стилизовать и подстраивать под свои нужды, как захочется.

Игорь

Добрый день! Подскажите в чем может быть проблема. Все скопировал и поставил как нужно, скрипт работает отлично в каталоге, но как только я добавляю товар в корзину и перехожу туда чтобы изменить количество товаров, то все ломается, значение не меняется

Denis Creative

Скорее всего там другие классы используются, или скрипт не подключается на странице Корзины, проверьте.

Marty

Как только кнопки передвигаешь в другой блок,для под свой дизайн,скрипт становиться бесполезным.

Denis Creative

Поменяйте классы, и будет вам счастье. Всё просто.

I have an input of type number that is rendered using the following code:

It looks like this:

I would like to turn it into something like this:

The second view is emulated using two separate buttons.

How could I style the arrows as described?

1 Answer 1

The native input[type=number] controls are not style-able cross-browser. The easiest and safest way to achieve what you want cross-browser/cross-device is to hide them using:

. which allows you to use your custom buttons, which could be linked to execute the functions the spinners (arrows) would ( .stepUp() and .stepDown() ), provided you keep the input’s type="number" .

Note: In order to change the input’s value, one needs to find it. To provide flexibility, in the example above I grouped buttons and the under a common parent and used that parent to find the (choosing not to rely on their proximity or particular order in DOM). The above method will change any input[type=number] sibling to the buttons. If that’s not convenient, one could use any other methods to find the input from the buttons:

• by id: .querySelector(‘#some-id’) :

• by className: .querySelector(‘.some-class’) :

Also note the above examples only search inside the .parentNode , not in the entire document , which is also possible:
i.e: onclick="document.getElementById(‘#some-id’).stepUp()"

• by proximity ( previousElementSibling | nextElementSibling )

• any other way to determine and find a particular input element in a DOM structure. For example, one could use third party libraries, such as jQuery:

An important note when using jQuery is that the stepUp() and stepDown() methods are placed on the DOM element, not on the jQuery wrapper. The DOM element is found inside the 0 property of the jQuery wrapper.

Note on preventDefault() . Clicking a inside a