Beim Entwerfen von Formularen mit Tailwind CSS möchten Sie möglicherweise die Standardpfeile (auch als Spinner bezeichnet) aus Zahleneingabefeldern entfernen. Diese Pfeile können benutzerdefinierte Designs beeinträchtigen und es ist schwierig, sie in verschiedenen Browsern einheitlich zu gestalten.

In diesem Tutorial erfahren Sie, wie Sie dies mit Tailwind CSS erreichen, sowohl mit Inline-Stilen als auch durch einen globalen CSS-Ansatz.

Das Problem

Browser fügen standardmäßig Inkrement- und Dekrementpfeile zu -Elementen hinzu. Obwohl diese Pfeile funktionsfähig sind, geraten sie oft in Konflikt mit benutzerdefinierten Designs und es kann schwierig sein, sie in verschiedenen Browsern einheitlich zu gestalten.

Die Lösung

Wir werden die CSS-Dienstprogrammklassen von Tailwind verwenden, um diese Pfeile zu entfernen und saubere, benutzerdefinierte Zahleneingaben zu erstellen. Wir werden uns auch ansehen, wie dieser Stil global für größere Projekte angewendet werden kann.

Inline-Ansatz

Beginnen wir mit einem Beispiel, das Inline-Tailwind-Klassen verwendet:

Die Schlüsselklassen zum Entfernen der Pfeile sind:

• [appearance:textfield]: Entfernt den Standardstil in Firefox.
• [&::-webkit-outer-spin-button]:appearance-none: Entfernt den äußeren Spin-Button in WebKit-Browsern.
• [&::-webkit-inner-spin-button]:appearance-none: Entfernt den inneren Spin-Button in WebKit-Browsern.

Globaler Ansatz

Bei größeren Projekten möchten Sie diesen Stil möglicherweise auf alle Zahleneingaben anwenden. Sie können dies tun, indem Sie Stile zu Ihrer globalen CSS-Datei hinzufügen:

1. Öffnen Sie Ihre global.css-Datei (oder eine gleichwertige Datei wie app.css oder style.css), abhängig von Ihrem Framework und Setup.

2. Folgendes CSS hinzufügen:
   

/* 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. Stellen Sie sicher, dass diese CSS-Datei in Ihre Haupt-CSS-Datei von Tailwind importiert oder in Ihrem HTML enthalten ist.

Nachdem Sie diese globalen Stile hinzugefügt haben, können Sie Ihr HTML vereinfachen:

Beachten Sie, dass wir die Klassen zum Entfernen von Pfeilen aus einzelnen Eingaben entfernt haben, da sie jetzt vom globalen CSS verarbeitet werden.

Hinzufügen benutzerdefinierter Pfeile

Während das Entfernen von Standardpfeilen die Designkonsistenz verbessert, möchten Sie möglicherweise benutzerdefinierte Schaltflächen zum Erhöhen/Verringern hinzufügen, um die Benutzererfahrung zu verbessern. So erstellen Sie benutzerdefinierte Pfeile, die zum Design unseres Formulars passen:

  Quantity
  

    
    

      
        
      
      
        
      
    
  

Lassen Sie uns die Schlüsselkomponenten dieser Implementierung aufschlüsseln:

1. Wir verpacken die Eingabe in ein relativ positioniertes Div, um eine absolute Positionierung unserer benutzerdefinierten Schaltflächen zu ermöglichen.

2. Das Eingabefeld behält seinen ursprünglichen Stil, einschließlich der Klassen zum Entfernen von Standardpfeilen:
   

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

1. Wir fügen ein Div mit absoluter Positionierung hinzu, um unsere benutzerdefinierten Schaltflächen zu enthalten:

   





Dadurch werden die Schaltflächen auf der rechten Seite der Eingabe positioniert und vertikal zentriert.


Jede Schaltfläche ist so gestaltet, dass sie mit der Eingabe verschmilzt:



   






h-full bewirkt, dass die Schaltfläche die Höhe der Eingabe ausfüllt.

border-l fügt eine subtile Trennung zwischen den Schaltflächen hinzu.

text-gray-500 und hover:text-sky-500 sorgen beim Hover für eine Farbänderung, die dem Fokusstatus unseres Formulars entspricht.



Wir verwenden SVG-Symbole für die Auf- und Ab-Pfeile, entsprechend der Größe B-4 H-4.
Die Onclick-Ereignisse verwenden die JavaScript-Methoden stepUp() und stepDown(), um den Eingabewert zu ändern:




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





  
  
  Wichtige Überlegungen


Es gibt ein paar Dinge, die Sie beachten sollten:


Das Entfernen von Pfeilen kann Auswirkungen auf Benutzer haben, die auf sie angewiesen sind. Erwägen Sie bei Bedarf die Bereitstellung alternativer Inkrementierungs-/Dekrementierungsmethoden.
Diese Lösung funktioniert in modernen Browsern. Ältere Browser erfordern möglicherweise zusätzliches CSS oder JavaScript.



  
  
  Abschluss


Indem Sie dies entweder inline oder global implementieren, können Sie die Standardpfeile effektiv aus Zahleneingaben in Ihrem Projekt entfernen.

Für diejenigen, die ihren Tailwind-CSS-Entwicklungsprozess weiter verbessern möchten, schauen Sie sich den DevDojo Tails-Seitenersteller an, der Ihnen dabei helfen kann, ganz einfach fantastische Designs zu erstellen.

Viel Spaß beim Codieren!