如何使用 CSS 自定义数字类型输入的增量箭头？

使用 CSS 自定义数字类型输入的增量箭头

在此场景中，您的目标是将数字类型的输入转换为更具视觉吸引力的组件，并自定义增量箭头。给定的示例使用 CSS 技术和巧妙的方法来实现所需的效果。

解决方案：

第一步涉及使用 CSS 隐藏默认增量箭头：

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

这会隐藏箭头，允许您创建自己的自定义设计。

接下来，为递增和递减功能创建两个单独的按钮：

<button class="btn btn-plus">+</button>
<button class="btn btn-minus">-</button>

位置使用输入组将这些按钮放在输入字段的两侧：

<div class="input-group inline-group">
  <div class="input-group-prepend"><button class="btn btn-outline-secondary btn-minus">-</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">+</button></div>
</div>

最后，添加 JavaScript 来处理单击按钮时的递增和递减操作：

$('.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']()
  }
})

这种方法结合了 CSS 来隐藏默认箭头、自定义按钮来提供递增和递减功能，以及 JavaScript 来处理按钮单击并相应地更新输入的值，从而为您在数字类型的输入上提供所需的自定义增量箭头。

以上是如何使用 CSS 自定义数字类型输入的增量箭头？的详细内容。更多信息请关注PHP中文网其他相关文章！