Comment puis-je supprimer les boutons de rotation des champs de saisie numérique dans les navigateurs Webkit ?

Empêcher l'affichage des boutons de rotation dans les navigateurs basés sur Webkit

Dans le développement Web, il est courant de rencontrer des problèmes de compatibilité entre navigateurs. Un de ces problèmes survient lors de l'utilisation de sur les navigateurs basés sur des kits Web comme Chrome et Safari. Ces navigateurs affichent des boutons rotatifs indésirables sur le côté droit des champs de saisie numérique.

Désactivation des boutons rotatifs avec CSS

Pour résoudre ce problème, nous pouvons exploiter CSS pour désactiver le boutons de rotation sur ces navigateurs. La clé est de cibler les propriétés CSS spécifiques qui contrôlent l'apparence et le comportement des boutons rotatifs.

La règle CSS suivante y parvient en supprimant l'apparence du bouton rotatif et en définissant leurs marges à zéro :

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

Une solution complète

Au départ, la règle ci-dessus peut laisser un petit espace réservé aux boutons de rotation sur le côté droit. Pour résoudre ce problème, il est également nécessaire de mettre à zéro le remplissage du champ de saisie. Par conséquent, la solution CSS complète devient :

input[type=number] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
}

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

En implémentant cette règle CSS, les boutons de rotation seront effectivement désactivés, laissant une interface propre et cohérente dans les différents navigateurs.

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!