Как изменять стрелки в input number, как задать свои стили

Віталий

4 роки ago

Как изменять стрелки в input number, как задать свои стили

Доброго времени суток

Это коротенькая статья, в которой я расскажу как можно поменять числовое поле ввода, оно же type="number". Как известно, стандартное числовое поле имеет не очень привлекательный вид. Данная статья не сложная, но тут будет использоваться jQuery, потому если вы не хотите менять только с помощью CSS, то данный способ вам не подойдет.

Почему я предлагаю данный урок, потому что если вы создаете посадочные страницы, интересные формы, просто красивые сайты, то использование стандартных полей типа числовых недопустимо. они имеют ужасный вид. Если еще в хроме не так страшно, то в Мозилле - ой как все плохо.

Выглядеть это будет примерно так:

Как я упомянул выше, данный способ использует jQuery, поэтому к вашему сайту должна быть подключена его библиотека. Если ее нет, то нужно добавить ее.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Только после нее нужно добавлять наш будущий скрипт, который будет помогать менять числовое поле. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?.

Сам скрипт имеет следующий вид, его подключать надо ниже библиотеки в коде.

<script>
jQuery(document).ready(function($){
    jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
    jQuery('.quantity').each(function() {
      var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

      btnUp.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue >= max) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue + 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

      btnDown.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue <= min) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue - 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

    });
});
</script>

Суть скрипта в том, что он добавляет после числового поля блок - quantity-nav, с двумя дочерними блоками quantity-button, которым так же присвоены свои классы - quantity-up и quantity-down. Это будущие две кнопки + и -, что соответственно будут увеличивать и уменьшать числовое значение в поле.

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

Само числовое поле, которое есть у вас при верстке нужно обернуть в родительский блок с классом - quantity (Вы можете менять названия классов на свои, но не забывайте менять их в скрипте и в стилях, чтобы все соответствовало!). Выглядеть, это должно примерно так:

<div class="quantity">
  <input type="number" min="1" max="9" step="1" value="1">
</div>

Значения и настройки поля у вас будут свои, но суть понятна. Для корректного отображения - добавляете стили. Примерный набор такой:

.quantity {
  position: relative;
  text-align:center;
  display:inline-block;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}

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

.quantity input {
  width: 45px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  line-height: 1.7;
  transform: translateX(-100%);
  user-select: none;
  font-weight:bold;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}

Можете менять на свои, только если понимает что и как. расписывать не буду, потому как тут все просто, обычный CSS.

На этом все, спасибо за внимание. 🙂

Exit mobile version