如何使用 CSS 自訂數字型別輸入上的增量箭頭？

使用CSS 自訂數字類型輸入的增量箭頭

您想要修改數字類型的輸入字段，使其透過自訂增量箭頭看起來更時尚。預設的增量箭頭（通常由加號和減號表示）可以隱藏並替換為外部按鈕。

要實現此目的，您可以使用以下步驟：

1. 刪除將下列CSS 套用於輸入欄位來顯示預設增量箭頭：

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

2. 建立兩個單獨的按鈕用於遞增和遞減操作。使用 HTML 和 CSS 定義其樣式：

<button class="btn btn-plus">
    <i class="fa fa-plus"></i>
</button>

<button class="btn btn-minus">
    <i class="fa fa-minus"></i>
</button>

3. 加入適當的 CSS 來調整元素的間距和對齊方式：

.input-group {
    max-width: 9rem;
    padding: .5rem;
}

.input-group .form-control {
    text-align: right;
}

4. 使用以下方法實現遞增和遞減按鈕的功能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 自訂數字型別輸入上的增量箭頭？的詳細內容。更多資訊請關注PHP中文網其他相關文章！