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

#javascript #jquery #css

.dateInput-day,
.dateInput-month {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

  
  





Имеется вот такой код, и мне нужно подправить дизайн стрелок вверх и вниз, если это
возможно, конечно.


Вынести кнопки за пределы поля, справа
Стилизовать кнопки: закруглить края и изменить цвет


Надеюсь есть знающие, заранее спасибо.
    

Ответы

Ответ 1

Решение на jQuery:



$('.number .number_controls > div').on('click', function() {
  var input = $(this).closest('.number').find('input'); // инпут
  var value = parseInt(input.val()) || 0; // получаем value инпута или 0
  if ($(this).hasClass('nc-minus')) {
    value = value - 1; // вычитаем из value 1
  }
  if ($(this).hasClass('nc-plus')) {
    value = value + 1; // прибавляем к value 1
  }
  input.val(value).change(); // выводим полученное value в инпут; триггер .change()
- на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
});
* {
  box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}


  
  

    
+
    
-
  







Чтобы избежать возможных "неприятностей" в виде некорректного отображения инпута
в разных браузерах, можно вообще отказаться от type="number" и использовать обычный
type="text", предворительно добавив "запрет" на ввод любых символов, кроме цифр и знака
минуса:



$('.number input').on('input change paste', function() {
  $(this).val(this.value.replace(/[^0-9\-]/, '')); // запрещаем ввод любых символов,
кроме цифр и знака минуса
});

$('.number .number_controls > div').on('click', function() {
  var input = $(this).closest('.number').find('input'); // инпут
  var value = parseInt(input.val()) || 0; // получаем value инпута или 0
  if ($(this).hasClass('nc-minus')) {
    value = value - 1; // вычитаем из value 1
  }
  if ($(this).hasClass('nc-plus')) {
    value = value + 1; // прибавляем к value 1
  }
  input.val(value).change(); // выводим полученное value в инпут; триггер .change()
- на случай, если на изменение этого инпута у вас уже объявлен еще какой-то обработчик
});
* {
  box-sizing: border-box;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}


  
  

    
+
    
-
  







Вариант с возможностью "пересчитывать" value, не отжимая ЛКМ:



$('.number input').on('input change paste', function() {
  $(this).val(this.value.replace(/[^0-9\-]/, '')); // запрещаем ввод любых символов,
кроме цифр и знака минуса
});

$('.number').each(function() {
  var numb = $(this),
    controls = numb.find('.number_controls div'),
    input = numb.find('input'), // инпут    
    interval,
    timeout;
  controls.each(function() {
    var control = $(this);
    var pressed = false;
    control.on('mousedown', function() {
      timeout = setTimeout(function() {
        pressed = true;
      }, 51);
      var value = parseInt(input.val()) || 0;
      interval = setInterval(function() {
        if (pressed) {
          if (control.hasClass('nc-minus')) {
            value = changeValue(value, 'minus');
          } else if (control.hasClass('nc-plus')) {
            value = changeValue(value, 'plus');
          }
          input.val(value).change();
        }
      }, 50);
    });

    control.on('mouseup', function() {
      var value = parseInt(input.val()) || 0;
      if (control.hasClass('nc-minus')) {
        value = changeValue(value, 'minus');
      } else if (control.hasClass('nc-plus')) {
        value = changeValue(value, 'plus');
      }
      input.val(value).change();

      pressed = false;
      clearInterval(interval);
    });

    control.on('mouseout', function() {
      clearInterval(interval);
    });
  });

  function changeValue(val, type) {
    if (type == 'minus') {
      val = val - 1;
    } else if (type == 'plus') {
      val = val + 1;
    }
    return val;
  }

});
* {
  box-sizing: border-box;
}

.number {
  display: inline-block;
  position: relative;
  padding-right: 30px;
}

.number input {
  height: 30px;
}

.number_controls {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
}

.number_controls>div {
  width: 30px;
  height: 15px;
  line-height: 15px;
  cursor: pointer;
  text-align: center;
}

.number_controls>div:hover {
  background: #ccc;
}


  
  

    
+
    
-
  





  
  

    
+
    
-
  



Ответ 2

К сожалению средствами CSS нельзя оформить эти кнопки, но есть способы с помощью
доп. библиотек, например PrimeFaces UI.

Как установить: https://www.primefaces.org/primeui/#setup 

Компонент spinner: https://www.primefaces.org/primeui/#spinner

После подключения библиотек, компонент инициализируется в 2 строчки:

$('#default').puispinner();




P.S. Библиотека компонентов избавляет от писанины кучи кода с неизвестными багами


Ответ 3

К сожалению, средствами CSS стилизировать невозможно, но можно использовать JS.
Решение на чистом JS будет приблизительно такое:



function input_val( dir, elid ) {
	console.log(dir + " " + elid)
	var inputEl = document.getElementById(elid)
  console.log(inputEl)
	var value = parseInt(inputEl.value, 10)
  if (isNaN(value))
  	value = 0
  	
	if (dir == "dec")
		value--
  else if (dir == "inc")
		value++
    
  inputEl.value = value
}
#dateInput-day,
#dateInput-month {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}
button {
    width: 25px;
    height: 25px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

   
  
  
  
  
  





Решение, конечно же, нужно будет подогнать под себя, но это вполне рабочий вариант.


Ответ 4

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

`

`


Создайте элемент типа input type="number"



В файле с JavaScript

$(document).ready(function () {
    $('.numb').number_plugin();
});