Css красивый input number

Styling input type number

I am trying to stylize the input type number. In this way: https://ant.design/components/input-number/ (first input). But without using the ant design framework. Where there are inner-spin, outer-spin I am trying add white background, gray lines and change the inner-spin color, outer-spin. Change the background color I can, but I can not spinns any more. I can not see them. I can use the bootstrap-react framework, but I do not see such a number input Code here: https://stackblitz.com/edit/react-cojnud

input[type=number] < line-height: 27px; box-sizing: border-box; font-variant: tabular-nums; line-height: 1.5; list-style: none; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; position: relative; width: 100%; height: 32px; padding: 4px 11px; color: rgba(0,0,0,0.65); font-size: 14px; line-height: 32px; background-image: none; -webkit-transition: all .3s; transition: all .3s; display: inline-block; width: 90px; margin: 0; padding: 0; border: 1px solid #d9d9d9; border-radius: 4px; >input[type=number].mod::-webkit-inner-spin-button < width: 30px; height: 30px; position: relative; display: block; overflow: hidden; color: rgba(0,0,0,0.45); font-weight: bold; line-height: 0; text-align: center; -webkit-transition: all .1s linear; transition: all .1s linear; background-color: #fff; >input[type=number]::-webkit-inner-spin-button:hover < color: blue; >input[type=number]:hover < border-color: #40a9ff; border-right-width: 1px !important; >input[type="number"].mod::-webkit-inner-spin-button

3 Answers 3

try to remove -webkit-appearance: none; And you will see the spinners again!

You won’t be able to modify it across browsers. Better to use it following manner:

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button < /* display: none; input[type=number] < -moz-appearance:textfield; /* Firefox */ >.number-wrapper < position: relative; width: 300px; height: 30px; >.number-wrapper input < width: 100%; height: 30px; box-sizing: border-box; padding-right: 18px; text-align: right; >.number-wrapper .rocker < position: absolute; background: #FFF; border: 1px solid lightblue; right: 0; padding: 2px 4px; color: #ccc; transition: all ease-in 100ms; height: 50%; box-sizing: border-box; line-height: 12px; cursor: pointer; visibility: hidden; >.number-wrapper:hover .rocker < visibility: visible; transition: all ease-in 300ms; >.number-wrapper .rocker.up < top: 0; >.number-wrapper .rocker.down < bottom: 0; transform: rotate(180deg); border-bottom: none; >.number-wrapper .rocker:hover, .number-wrapper .rocker:focus < box-shadow: 0 0 4px lightblue; >.number-wrapper .rocker:active < transform: scale(0.4); >.number-wrapper .rocker.down:active

Источник

Input type number стилизация

Сегодня рассмотрим как можно стилизовать input type number. А если быть точным, то как его создать таким, каким душе угодно.

.input-number < position: relative; >.input-number__input < border-radius: 7px; padding-left: 10px; padding-right: 20px; border: 1px solid #d0c4db; outline: none; width: 77px; height: 33px; transition: .2s; >.input-number:hover .input-number__input, .input-number:focus .input-number__input < border-color: #888; >.input-number__top < width: 0px; border: 5px solid transparent; border-bottom: 7px solid #d0c4db; position: absolute; top: 5%; right: 5px; cursor: pointer; transition: .2s; >.input-number__top:hover < border-bottom-color: #888; >.input-number__bottom < width: 0px; border: 5px solid transparent; border-top: 7px solid #d0c4db; position: absolute; top: 60%; right: 5px; cursor: pointer; transition: .2s; >.input-number__bottom:hover

jQuery(($) => < // Уменьшаем на 1 $(document).on("click", ".inputTN__bottom", function () < let total = $(this).prev().prev(); if (total.val() >1) < total.val(+total.val() - 1); >>); // Увеличиваем на 1 $(document).on("click", ".inputTN__top", function () < let total = $(this).prev(); total.val(+total.val() + 1); >); // Запрещаем ввод текста $(document).on("input", ".input-number__input", function () < if (this.value.match(/[^0-9]/g)) < this.value = this.value.replace(/[^0-9]/g, ""); >>); // Запрещаем ввод текста js // document.querySelectorAll(".inputTN__input").forEach(function (el) < // el.addEventListener("input", function () < // this.value = this.value.replace(/[^d]/g, ""); // >); // >); >);

Обратите внимание, должен быть подключен jQuery

Input type number — стрелки по бокам

Структура блока с input type number.

/* input type number */ .input-number < display: flex; align-items: center; background: #FFFFFF; border: 1px solid #E5E8EE; box-sizing: border-box; border-radius: 6px; color: #424348; font-size: 14px; text-align: center; width: calc(33px * 3); >.input-number__input < background: #E5E8EE; width: 32px; height: 32px; border: none; padding: 8px; text-align: center; >.input-number__minus, .input-number__plus < width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; >/* /input type number */

jQuery(($) => < // Уменьшаем на 1 $(document).on("click", ".input-number__minus", function () < let total = $(this).next(); if (total.val() >1) < total.val(+total.val() - 1); >>); // Увеличиваем на 1 $(document).on("click", ".input-number__plus", function () < let total = $(this).prev(); total.val(+total.val() + 1); >); // Запрещаем ввод текста document.querySelectorAll('.input-number__input').forEach(function (el) < el.addEventListener('keydown', function (event) < // Разрешаем: backspace, delete, tab if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || // Ctrl+A (event.keyCode == 65 && event.ctrlKey === true) || // ← → (event.keyCode >= 35 && event.keyCode else < // Только цифры if ((event.keyCode < 48 || event.keyCode >57) && (event.keyCode < 96 || event.keyCode >105)) < event.preventDefault(); >> >); >); >);

В итоге мы получили три элемента: сам input, стрелка вверх и стрелка вниз. Все эти три элемента можно стилизовать так, как вам это необходимо.

Полезные ссылки

• Шпаргалка по использованию jQuery
• Выполнение js в зависимости от ширины экрана ссылка
• Статья про валидацию input.
• Стилизация input type file.

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Комментарии ( 1 )

 // input type number const total = document.querySelector('.input-number__input'), min = 1, max = 99; // Уменьшаем на 1 document.querySelector('.input-number__minus').addEventListener('click', () => < if (total.value >min) < total.value = +total.value - 1; >>); // Увеличиваем на 1 document.querySelector('.input-number__plus').addEventListener('click', () => < if (total.value < max) < total.value = +total.value + 1; >>); // Запрещаем ввод текста document.querySelectorAll('.input-number__input').forEach(function(el) < el.addEventListener('input', function() < this.value = this.value.replace(/[^d]/g, ''); >); >); 

Источник

Input type number

В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.

Для поля доступны следующие атрибуты:

Атрибут	Описание
step	Шаг изменения значения
max	Максимальное значение
min	Минимальное значение
placeholder	Подсказка
readonly	Только для чтения
disabled	Заблокирован
list	Связка со списком опций datalist по id
required	Обязательный для заполнения

Шаг изменения

Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).

Пример:

Минимальное значение

Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.

Пример:

Максимальное значение

Атрибут max=»100″ задает максимально возможное значение value .

Пример:

Опции по умолчанию

У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .

Пример:

Валидация

Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .

Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.

Пример:

Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.

input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after

Источник

Кроссбраузерный красивый input type=«number»

Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type=»number»» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type=»number»».

На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:

Для примера возьмем три input`a с разными атрибутами:

Проверено: opera, chrome, ff, ie9+

Код плагина:

;(function ($) ').insertAfter(el); var parent = el.find('+ ' + inBox); parent.append(el); var classes = el.attr('class'); parent.append(''); el.hide(); var newEl = el.next(); newEl.addClass(classes); var attrValue; function setInputAttr(attrName) < if (el.attr(attrName)) < attrValue = el.attr(attrName); newEl.attr(attrName, attrValue); >> setInputAttr('value'); setInputAttr('placeholder'); setInputAttr('min'); setInputAttr('max'); setInputAttr('step'); parent.append(' '); parent.append(' '); >); //end each var value, step; var interval = null, timeout = null; function ToggleValue(input) < input.val(parseInt(input.val(), 10) + d); console.log(input); >$('body').on('mousedown', moreVal, function () < var el = $(this); var input = el.siblings(newInput); moreValFn(input); timeout = setTimeout(function()< interval = setInterval(function()< moreValFn(input); >, 50); >, 200); >); $('body').on('mousedown', lessVal, function () < var el = $(this); var input = el.siblings(newInput); lessValFn(input); timeout = setTimeout(function()< interval = setInterval(function()< lessValFn(input); >, 50); >, 200); >); $(moreVal +', '+ lessVal).on("mouseup mouseout", function() < clearTimeout(timeout); clearInterval(interval); >); function moreValFn(input) < var max = input.attr('max'); checkInputAttr(input); var newValue = value + step; if (newValue >max) < newValue = max; >changeInputsVal(input, newValue); > function lessValFn(input) < var min = input.attr('min'); checkInputAttr(input); var newValue = value - step; if (newValue < min) < newValue = min; >changeInputsVal(input, newValue); > function changeInputsVal(input, newValue) < input.val(newValue); var inputNumber = input.siblings(this); inputNumber.val(newValue); >function checkInputAttr(input) < if (input.attr('value')) < value = parseFloat(input.attr('value')); >else if (input.attr('placeholder')) < value = parseFloat(input.attr('placeholder')); >if (!( $.isNumeric(value) )) < value = 0; >if (input.attr('step')) < step = parseFloat(input.attr('step')); >else < step = 1; >> $(newInput).change(function () < var input = $(this); var value = parseFloat(input.val()); var min = input.attr('min'); var max = input.attr('max'); if (value < min) < value = min; >else if (value > max) < value = max; >if (!( $.isNumeric(value) )) < value = ''; >input.val(value); input.siblings(this).val(value); >); $(newInput).keydown(function(e)< var input = $(this); var k = e.keyCode; if( k == 38 )< moreValFn(input); >else if( k == 40) < lessValFn(input); >>); >; >)(jQuery); 

Буду рад любым советам, замечаниям и предложениям.

Источник

Как стилизовать стрелки для input[type=number]

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

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

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

/* Для Chrome */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button < -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; >/* Для Firefox */ input[type=number]

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

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

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

$(function() < (function quantityProducts() < var $quantityArrowMinus = $(".quantity-arrow-minus"); var $quantityArrowPlus = $(".quantity-arrow-plus"); var $quantityNum = $(".quantity-num"); $quantityArrowMinus.click(quantityMinus); $quantityArrowPlus.click(quantityPlus); function quantityMinus() < if ($quantityNum.val() >1) < $quantityNum.val(+$quantityNum.val() - 1); >> function quantityPlus() < $quantityNum.val(+$quantityNum.val() + 1); >>)(); >);

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

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы…

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

Источник