Comment puis-je créer des boutons d'incrémentation et de décrémentation personnalisés et visuellement attrayants pour un champ de saisie de type numéro en CSS ?

Personnalisation des flèches d'incrément lors de la saisie d'un numéro de type à l'aide de CSS

Problème

Un champ de saisie de type numéro affiche des flèches d'incrément mal stylisées. L'objectif est de le transformer en un design plus esthétique, semblable à des boutons séparés.

Solution proposée

Bien que les techniques CSS ne puissent à elles seules atteindre entièrement le résultat souhaité, une solution de contournement intelligente existe. Voici comment procéder :

1. Masquer les flèches d'entrée natives :

   À l'aide de CSS, définissez l'apparence : aucune sur le ::-webkit-outer -spin-button et ::-webkit-inner-spin-button pseudo-éléments dans le champ de saisie. Cela masquera les flèches par défaut.

2. Créer des boutons personnalisés :

   Ensuite, entourez le champ de saisie de deux boutons distincts, un pour décrémenter et un pour incrémenter. Utilisez des icônes Font Awesome ou des images personnalisées pour les visuels des boutons.

3. Gérer la manipulation des valeurs :

   Ajoutez des écouteurs d'événements aux boutons personnalisés. Lorsque vous cliquez sur un bouton, déclenchez les méthodes stepUp ou stepDown sur le champ de saisie d'origine pour modifier sa valeur en conséquence.

Exemple d'implémentation (utilisation de jQuery avec Bootstrap) :

<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;
}

Cette configuration masque les flèches natives, ajoute des boutons personnalisés pour incrémenter et décrémenter et manipule l'entrée valeur du champ à l'aide des méthodes stepUp et stepDown de jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!