如何为 CSS 中数字类型的输入字段创建自定义的、视觉上吸引人的增量和减量按钮？

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

问题

数字类型的输入字段显示样式不佳的增量箭头。我们的目标是将其转变为更美观的设计，类似于单独的按钮。

建议的解决方案

虽然仅靠 CSS 技术无法完全实现所需的结果，但存在一种巧妙的解决方法。操作方法如下：

1. 隐藏本机输入箭头：

   使用 CSS，在 ::-webkit-outer 上设置外观：无输入字段内的 -spin-button 和 ::-webkit-inner-spin-button 伪元素。这将隐藏默认箭头。

2. 创建自定义按钮：

   接下来，用两个单独的按钮包围输入字段，一个用于递减，一个用于一个用于递增。使用 Font Awesome 图标或自定义图像作为按钮的视觉效果。

3. 处理值操作：

   将事件侦听器添加到自定义按钮。单击按钮时，触发原始输入字段上的 stepUp 或 stepDown 方法以相应地更改其值。

实现示例（使用 jQuery 和 Bootstrap）：

<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>

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

此设置隐藏了本机箭头，添加了用于递增和的自定义按钮递减，并使用 jQuery 的 stepUp 和 stepDown 方法操作输入字段的值。

以上是如何为 CSS 中数字类型的输入字段创建自定义的、视觉上吸引人的增量和减量按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！