Tailwind CSS を使用してフォームをデザインする場合、数値入力フィールドからデフォルトの矢印 (スピナーとも呼ばれます) を削除したい場合があります。これらの矢印はカスタム デザインを妨げる可能性があり、異なるブラウザ間で一貫したスタイルを設定するのが困難です。

このチュートリアルでは、Tailwind CSS を使用して、インライン スタイルとグローバル CSS アプローチの両方でこれを実現する方法を検討します。

問題

デフォルトでは、ブラウザは 要素に増分矢印と減分矢印を追加します。これらの矢印は機能しますが、カスタム デザインと衝突することが多く、さまざまなブラウザ間で均一にスタイルを設定するのが難しい場合があります。

ソリューション

Tailwind CSS ユーティリティ クラスを使用して、これらの矢印を削除し、クリーンでカスタマイズされた数値入力を作成します。また、このスタイルを大規模なプロジェクトにグローバルに適用する方法についても説明します。

インラインアプローチ

インライン Tailwind クラスを使用する例から始めましょう:

矢印を削除するための主要なクラスは次のとおりです:

• [Appearance:textfield]: Firefox のデフォルトのスタイルを削除します。
• [&::-webkit-outer-spin-button]:Appearance-none: WebKit ブラウザの外側のスピン ボタンを削除します。
• [&::-webkit-inner-spin-button]:Appearance-none: WebKit ブラウザーの内側のスピン ボタンを削除します。

グローバルなアプローチ

大規模なプロジェクトの場合は、すべての数値入力にこのスタイルを適用するとよいでしょう。これを行うには、グローバル CSS ファイルにスタイルを追加します:

1. フレームワークと設定に応じて、global.css ファイル (または app.css やstyles.css などの同等のファイル) を開きます。

2. 次の CSS を追加します:
   

/* In your global.css file */
@layer utilities {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

1. この CSS ファイルがメインの Tailwind CSS ファイルにインポートされるか、HTML に含まれていることを確認してください。

これらのグローバル スタイルを追加した後、HTML を簡素化できます:

矢印を削除するクラスはグローバル CSS によって処理されるようになったため、個々の入力から削除したことに注意してください。

カスタム矢印の追加

デフォルトの矢印を削除するとデザインの一貫性が向上しますが、ユーザー エクスペリエンスを向上させるためにカスタムの増加/減少ボタンを追加することもできます。フォームのデザインに一致するカスタム矢印を作成する方法は次のとおりです:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

この実装の主要なコンポーネントを詳しく見てみましょう:

1. カスタム ボタンの絶対位置を許可するために、入力を相対位置の div でラップします。

2. 入力フィールドは、デフォルトの矢印を削除するクラスを含む元のスタイルを保持します:
   

   [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none

1. カスタム ボタンを含めるために、絶対位置を指定して div を追加します。

   





これにより、ボタンが入力の右側に配置され、垂直方向の中央に配置されます。


各ボタンは入力とブレンドするようにスタイル設定されています。



   






h-full は、ボタンを入力の高さいっぱいにします。

border-l は、ボタンの間に微妙な区切り文字を追加します。

text-gray-500 と hover:text-sky-500 は、フォームのフォーカス状態と一致するホバー時の色の変化を提供します。



上矢印と下矢印には SVG アイコンを使用し、w-4 h-4 で適切なサイズに設定します。
onclick イベントは、JavaScript の stepUp() メソッドと stepDown() メソッドを使用して入力値を変更します。




   onclick="document.getElementById('quantity').stepUp()"
   onclick="document.getElementById('quantity').stepDown()"





  
  
  重要な考慮事項


考慮すべきことがいくつかあります:


矢印を削除すると、矢印に依存しているユーザーに影響を及ぼす可能性があります。必要に応じて、代替の増分/減分メソッドを提供することを検討してください。
このソリューションは最新のブラウザで動作します。古いブラウザでは追加の CSS または JavaScript が必要になる場合があります。



  
  
  結論


これをインラインまたはグローバルに実装すると、プロジェクト全体の数値入力からデフォルトの矢印を効果的に削除できます。

Tailwind CSS 開発プロセスをさらに改善したいと考えている方は、DevDojo Tails ページ ビルダーをチェックしてください。これは、素晴らしいデザインを簡単に作成するのに役立ちます。

コーディングを楽しんでください!