CSS で数値入力フィールドのカスタム増分矢印を作成する方法

数値型の入力フィールドの増分矢印のカスタマイズ

概要:

入力フィールド数値型を使用すると、数値を入力する簡単な方法が提供されます。ただし、デフォルトの増分矢印は、必ずしも目的のデザインと一致するとは限りません。この記事では、CSS を使用して増分矢印をカスタマイズして、より美しい外観を実現する方法について説明します。

増分矢印のカスタマイズ:

増分矢印をカスタマイズするには、次のことができます。次の CSS プロパティを使用します:

• -webkit-Appearance: none;:デフォルトの増分矢印を非表示にします。
• margin: 0;: カスタム増分矢印の周囲のスペースを削除します。

カスタム増分矢印の作成:

デフォルトの増分矢印が非表示になったら、ボタンとアイコンを使用してカスタムの増分矢印を作成できます。 Font Awesome の Fa-plus アイコンと Fa-minus アイコンをそれぞれインクリメント ボタンとデクリメント ボタンに使用できます。

例:

これは、HTML コードの例です。 Font Awesome を使用してカスタムの増分矢印を作成しますアイコン:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="input-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>

カスタム増分矢印のスタイル設定:

カスタム増分矢印のスタイルを設定するには、背景色、色、および国境。デザイン要件に合わせてボタンのサイズとパディングを調整することもできます。

結論:

CSS を使用してタイプ番号の入力フィールドの増分矢印をカスタマイズすると、次のことが可能になります。設計の柔軟性が向上します。デフォルトの増分矢印を非表示にし、カスタム ボタンを作成することで、より視覚的に魅力的でユーザーフレンドリーなフォームを作成できます。

以上がCSS で数値入力フィールドのカスタム増分矢印を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。