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

Question

我有一个使用以下代码呈现的类型 number 的输入：

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

它看起来像这样：

我想把它变成这样的东西：

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

我怎么能像描述的那样设置箭头的样式？

原文由 MadPhysicist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

tl;博士：

在私下被问到以下设置好几次后，我决定为其添加一个演示（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[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-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') ：

 <button onclick="this.parentNode.querySelector('#some-id').stepUp()"></button>

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

 <button onclick="this.parentNode.querySelector('.some-class').stepUp()"></button>

另请注意，上述示例仅在 .parentNode 内搜索，而不是在整个 document 内搜索，这也是可能的：

即： onclick="document.getElementById('#some-id').stepUp()"

• 按 接近度（ previousElementSibling | nextElementSibling ）

 <button onclick="this.previousElementSibling.stepUp()"></button>

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

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

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

---

注意 preventDefault() 。在 <button> 中单击 <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();
})

原文由 tao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是另一个版本，基于@tao 的答案，使用字体真棒：

 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:after {
  display: inline-block;
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f077';
  transform: translate(-50%, -50%) rotate(180deg);
}
.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.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;
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="number-input">
  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></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>

原文由 Black 发布，翻译遵循 CC BY-SA 4.0 许可协议