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

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

Linda Hamilton

リリース： 2024-11-12 00:20:03

オリジナル

773 人が閲覧しました

How Can I Customize the Increment Arrows on an Input of Type Number Using CSS?

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

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

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

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

ログイン後にコピー

適切な CSS を追加して要素の間隔と配置を調整します:

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

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

ログイン後にコピー

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 サイトの他の関連記事を参照してください。