Lors de la conception de formulaires avec Tailwind CSS, vous souhaiterez peut-être supprimer les flèches par défaut (également appelées flèches) des champs de saisie de nombres. Ces flèches peuvent interférer avec les conceptions personnalisées et sont difficiles à styliser de manière cohérente sur différents navigateurs.

Dans ce didacticiel, nous explorerons comment y parvenir en utilisant Tailwind CSS, à la fois avec des styles en ligne et via une approche CSS globale.

Le problème

Par défaut, les navigateurs ajoutent des flèches d'incrémentation et de décrémentation aux éléments . Bien que fonctionnelles, ces flèches entrent souvent en conflit avec les conceptions personnalisées et peuvent être difficiles à styliser uniformément sur différents navigateurs.

La solution

Nous utiliserons les classes utilitaires CSS Tailwind pour supprimer ces flèches et créer des entrées numériques propres et personnalisées. Nous verrons également comment appliquer ce style à l'échelle mondiale pour des projets plus importants.

Approche en ligne

Commençons par un exemple qui utilise les classes Tailwind en ligne :

Les classes clés pour supprimer les flèches sont :

• [apparence:textfield] : supprime le style par défaut dans Firefox.
• [&::-webkit-outer-spin-button]:apparence-none : supprime le bouton de rotation externe dans les navigateurs WebKit.
• [&::-webkit-inner-spin-button]:apparence-none : supprime le bouton de rotation interne dans les navigateurs WebKit.

Approche globale

Pour les projets plus importants, vous souhaiterez peut-être appliquer ce style à toutes les entrées numériques. Vous pouvez le faire en ajoutant des styles à votre fichier CSS global :

1. Ouvrez votre fichier global.css (ou équivalent, comme app.css ou styles.css) en fonction de votre framework et de votre configuration.

2. Ajoutez le CSS suivant :
   

/* 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. Assurez-vous que ce fichier CSS est importé dans votre fichier CSS Tailwind principal ou inclus dans votre code HTML.

Après avoir ajouté ces styles globaux, vous pouvez simplifier votre code HTML :

Remarquez que nous avons supprimé les classes de suppression de flèches des entrées individuelles, car elles sont désormais gérées par le CSS global.

Ajout de flèches personnalisées

Bien que la suppression des flèches par défaut améliore la cohérence de la conception, vous souhaiterez peut-être ajouter des boutons d'incrémentation/décrémentation personnalisés pour une meilleure expérience utilisateur. Voici comment créer des flèches personnalisées qui correspondent au design de notre formulaire :

  Quantity
  

    

      
        
      
        
    
  

Décomposons les éléments clés de cette implémentation :

1. Nous enveloppons l'entrée dans un div à positionnement relatif pour permettre le positionnement absolu de nos boutons personnalisés.

2. Le champ de saisie conserve son style d'origine, y compris les classes pour supprimer les flèches par défaut :
   

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

1. Nous ajoutons un div avec un positionnement absolu pour contenir nos boutons personnalisés :

   





Cela positionne les boutons sur le côté droit de l'entrée et les centre verticalement.

Chaque bouton est conçu pour se fondre dans l'entrée :

   





h-full fait en sorte que le bouton remplisse la hauteur de l'entrée.

border-l ajoute un séparateur subtil entre les boutons.

text-gray-500 et hover:text-sky-500 fournissent un changement de couleur au survol qui correspond à l'état de focus de notre formulaire.
Nous utilisons des icônes SVG pour les flèches haut et bas, dimensionnées de manière appropriée avec w-4 h-4.
Les événements onclick utilisent les méthodes stepUp() et stepDown() de JavaScript pour modifier la valeur d'entrée :

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





  
  
  Considérations importantes


Il y a quelques éléments à prendre en compte :

La suppression des flèches peut affecter les utilisateurs qui les utilisent. Envisagez de proposer des méthodes alternatives d'incrémentation/décrémentation si nécessaire.
Cette solution fonctionne dans les navigateurs modernes. Les navigateurs plus anciens peuvent nécessiter du CSS ou du JavaScript supplémentaire.

  
  
  Conclusion


En implémentant cela, en ligne ou globalement, vous pouvez supprimer efficacement les flèches par défaut des entrées numériques dans votre projet.

Pour ceux qui cherchent à améliorer davantage leur processus de développement CSS Tailwind, consultez le générateur de pages DevDojo Tails, qui peut vous aider à créer facilement des designs étonnants.

Bon codage !