Comment personnaliser les flèches d'incrément d'une entrée de type numéro en utilisant CSS ?

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

Dans ce scénario, vous souhaitez transformer une entrée de type numéro en un composant plus attrayant visuellement, avec des flèches d'incrémentation. L'exemple donné utilise des techniques CSS et une approche intelligente pour obtenir l'effet souhaité.

Solution :

La première étape consiste à masquer les flèches d'incrémentation par défaut à l'aide de CSS :

.form-control[type="number"]::-webkit-inner-spin-button,
.form-control[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Cela masque les flèches, vous permettant de créer votre propre design personnalisé.

Ensuite, créez deux boutons distincts pour le fonctions d'incrémentation et de décrémentation :

<button class="btn btn-plus">+</button>
<button class="btn btn-minus">-</button>

Positionnez ces boutons de chaque côté du champ de saisie à l'aide d'un groupe de saisie :

<div class="input-group inline-group">
  <div class="input-group-prepend"><button class="btn btn-outline-secondary btn-minus">-</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">+</button></div>
</div>

Enfin, ajoutez JavaScript pour gérer les opérations d'incrémentation et de décrémentation lorsque l'on clique sur les boutons :

$('.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']()
  }
})

Cette approche combine CSS pour masquer les flèches par défaut, des boutons personnalisés pour fournir la fonctionnalité d'incrémentation et de décrémentation, et JavaScript pour gérer les clics sur les boutons et mettre à jour la valeur de l'entrée en conséquence, vous donnant les flèches d'incrément personnalisées souhaitées sur votre entrée de type numéro.

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!