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