Comment puis-je personnaliser les flèches d'incrément sur une entrée de type numéro à l'aide de CSS ?

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

Vous souhaitez modifier un champ de saisie de type numéro pour le rendre plus élégant avec des flèches d'incrément personnalisées. Les flèches d'incrémentation par défaut, souvent représentées par des signes plus et moins, peuvent être masquées et remplacées par des boutons externes.

Pour y parvenir, vous pouvez suivre les étapes suivantes :

1. Supprimer le apparition des flèches d'incrémentation par défaut en appliquant le CSS suivant au champ de saisie :

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

2. Créez deux boutons distincts pour les actions d'incrémentation et de décrémentation. Utilisez HTML et CSS pour définir leurs styles :

<button class="btn btn-plus">
    <i class="fa fa-plus"></i>
</button>

<button class="btn btn-minus">
    <i class="fa fa-minus"></i>
</button>

3. Ajoutez le CSS approprié pour ajuster l'espacement et l'alignement des éléments :

.input-group {
    max-width: 9rem;
    padding: .5rem;
}

.input-group .form-control {
    text-align: right;
}

4. Implémentez la fonctionnalité pour les boutons d'incrémentation et de décrémentation à l'aide de JavaScript :

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

En implémentant ces modifications, vous pouvez personnaliser les flèches d'incrémentation sur le champ de saisie, le rendant à la fois visuellement attrayant et fonctionnel.

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!