CSS で数値型の入力フィールド用に、視覚的に魅力的なカスタムの増分ボタンと減分ボタンを作成するにはどうすればよいですか?

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

問題

タイプ番号の入力フィールドには、不適切なスタイルの増分矢印が表示されます。目標は、独立したボタンに似た、より美しく魅力的なデザインに変換することです。

提案された解決策

CSS 技術だけでは望ましい結果を完全に達成することはできませんが、賢明な回避策が存在します。その方法は次のとおりです:

1. ネイティブ入力矢印を非表示にする:

   CSS を使用して、::-webkit-outer で外観: none を設定します。 -spin-button および ::-webkit-inner-spin-button 擬似要素入力フィールド内。これにより、デフォルトの矢印が非表示になります。

2. カスタム ボタンの作成:

   次に、入力フィールドを 2 つの別々のボタンで囲みます。1 つはデクリメント用、もう 1 つは減少用で、 1 つは増分用です。ボタンのビジュアルには Font Awesome アイコンまたはカスタム イメージを使用します。

3. ハンドル値の操作:

   カスタム ボタンにイベント リスナーを追加します。ボタンがクリックされると、元の入力フィールドで stepUp または stepDown メソッドをトリガーし、それに応じて値を変更します。

実装例 (ブートストラップで jQuery を使用する):

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