使用CSS自定义类型编号输入上的增量箭头

Question

我有一个使用以下html" target="_blank">代码呈现的数字类型输入：

<input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number">

看起来像这样：

我想把它变成这样：

使用两个单独的按钮模拟第二个视图。

如何按所述方式设置箭头样式？

Answer 1

tl; dr：

被问到太多次了，所以我为Bootstrap 4 + jQuery + Font Awesome输入组设置添加了一个快速演示：

$('.btn-plus, .btn-minus').on('click', function(e) {

  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');

  const input = $(e.target).closest('.input-group').find('input');

  if (input.is('input')) {

    input[0][isNegative ? 'stepDown' : 'stepUp']()

  }

})


.inline-group {

  max-width: 9rem;

  padding: .5rem;

}



.inline-group .form-control {

  text-align: right;

}



.form-control::-webkit-inner-spin-button,

.form-control::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}


<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>



<div class="input-group inline-group">

  <div class="input-group-prepend">

    <button class="btn btn-outline-secondary btn-minus">

      <i class="fa fa-minus"></i>

    </button>

  </div>

  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">

  <div class="input-group-append">

    <button class="btn btn-outline-secondary btn-plus">

      <i class="fa fa-plus"></i>

    </button>

  </div>

</div>

长（初始）答案：

本机input[type=number]控件不是可样式化的跨浏览器。实现所需的跨浏览器/跨设备的最简单，最安全的方法是使用以下方法隐藏它们：

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}

…，它允许您使用自定义按钮，可以将其链接起来，以执行微调器（箭头）将要执行的功能（.stepUp()和.stepDown()），前提是您保留输入的type="number"。

例如：

input[type="number"] {

  -webkit-appearance: textfield;

  -moz-appearance: textfield;

  appearance: textfield;

}



input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

}



.number-input {

  border: 2px solid #ddd;

  display: inline-flex;

}



.number-input,

.number-input * {

  box-sizing: border-box;

}



.number-input button {

  outline:none;

  -webkit-appearance: none;

  background-color: transparent;

  border: none;

  align-items: center;

  justify-content: center;

  width: 3rem;

  height: 3rem;

  cursor: pointer;

  margin: 0;

  position: relative;

}



.number-input button:before,

.number-input button:after {

  display: inline-block;

  position: absolute;

  content: '';

  width: 1rem;

  height: 2px;

  background-color: #212121;

  transform: translate(-50%, -50%);

}

.number-input button.plus:after {

  transform: translate(-50%, -50%) rotate(90deg);

}



.number-input input[type=number] {

  font-family: sans-serif;

  max-width: 5rem;

  padding: .5rem;

  border: solid #ddd;

  border-width: 0 2px;

  font-size: 2rem;

  height: 3rem;

  font-weight: bold;

  text-align: center;

}


<div class="number-input">

  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>

  <input class="quantity" min="0" name="quantity" value="1" type="number">

  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>

</div>

注意：
为了更改输入的值，需要找到它。为了提供灵活性，在上面的示例中，我将按钮和分组<input>在一个公共父对象下，并使用该父对象来查找<input>（选择不依赖于它们的接近度或DOM中的特定顺序）。上面的方法
将更改 input[type=number] 按钮的 任何 同级
。如果那不方便，则可以使用任何其他方法从按钮中查找输入：

• 通过 ID ：.querySelector('#some-id')：

• 通过 类名 ：.querySelector('.some-class')：

另请注意，上述示例仅在内而.parentNode不是在内进行搜索document，这也是可能的：
即：onclick="document.getElementById('#some-id').stepUp()"

• 按 接近度 （previousElementSibling| nextElementSibling）

• 确定和查找DOM结构中特定输入元素的任何其他方式。例如，可以使用第三方库，例如jQuery：

使用jQuery时，重要的一点是stepUp()和stepDown()方法放在DOM元素上，而不是在jQuery包装器上。DOM元素位于包装器的0属性内jQuery。

注意 上preventDefault()。单击<button>内部的a <form> 将
触发表单提交。因此，如果按上述方式在内部表格中使用，则onclick还应包含preventDefault();。例：

<button onclick="$(this).prev()[0].stepUp();preventDefault()"></button>

但是，如果使用<a>标记而不是<button>s，则没有必要。同样，可以为带有小JavaScript代码段的所有表单按钮全局设置预防措施：

var buttons = document.querySelectorAll('form button:not([type="submit"])');
for (i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function(e) {
    e.preventDefault();
  });
}

…或者使用jQuery：

$('form').on('click', 'button:not([type="submit"])', function(e){
  e.preventDefault();
})