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;
}

これにより矢印が非表示になり、独自のカスタムを作成できるようになります

次に、インクリメント関数とデクリメント関数用に 2 つの別々のボタンを作成します。

<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 を追加します。 clicked:

$('.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 中国語 Web サイトの他の関連記事を参照してください。