CSS を使用してタイプ番号の入力でインクリメント矢印をカスタマイズするにはどうすればよいですか?

CSS を使用したタイプ番号の入力時の増分矢印のカスタマイズ

カスタマイズされた増分矢印を使用して、タイプ番号の入力フィールドを変更して、よりスタイリッシュに表示したいと考えています。多くの場合、プラス記号とマイナス記号で表されるデフォルトの増分矢印は、非表示にして外部ボタンに置​​き換えることができます。

これを実現するには、次の手順を使用できます。

1. 次の CSS を入力フィールドに適用して、デフォルトの増分矢印の外観を変更します。

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

2. 増分アクションと減分アクション用の 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 中国語 Web サイトの他の関連記事を参照してください。