Css input number стрелки

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

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

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

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

Есть input с типом number и при наведении на него появляются такие стрелочки:

Можно ли как-то их убрать?

5 ответов 5

Не наблюдаю стрелки в IE. Код ниже прячет стрелки управления в браузерах, основанных на webkit (Opera для проверки нет):

Для Firefox попроще:

Эти стрелки добавляют сам бреузер, но их можно убрать обычными стилями css.

Это для браузера Chrome:

Это для браузера Firefox:

Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github
Плагин для стилизации и на сайте http://number-plugin.ru

Для подключения плагина добавьте в

И подключите скрипт

В англоязычном SO дан такой ответ — попробуйте добавить в .css такое:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css hover или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.10.35756

Главная >> Frontend >> css >> Html5. Как убрать стрелочки с input[type=number]

Стандартные стрелочки с текстового поля с типом number выглядят убого и мало когда подходят по своему внешнему виду.

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

Оцените статью
Много толка
Добавить комментарий