如何使用 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中文網其他相關文章！