Comment masquer les boutons de rotation sur les champs de saisie numérique dans les navigateurs Webkit ?

Désactivation des boutons rotatifs de Webkit sur le type d'entrée="number"

Lors de la conception de sites Web spécifiquement pour les appareils mobiles mais également compatibles avec les ordinateurs de bureau, certains défis surgir. L’un de ces problèmes est l’affichage de boutons rotatifs inutiles à côté des champs de saisie désignés comme numériques. Bien que cette fonctionnalité puisse être bénéfique pour les valeurs augmentant ou diminuant rapidement, elle peut compromettre l'esthétique de certaines conceptions.

Pour éliminer ces boutons rotatifs dans les navigateurs Safari et Chrome, il est recommandé d'utiliser des techniques de style CSS qui exploitent le -propriété d'apparence webkit. Voici une solution qui masque efficacement les boutons rotatifs :

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

En définissant la propriété -webkit-apparence sur "aucun", les boutons rotatifs sont visuellement désactivés sans affecter la fonctionnalité du champ de saisie numérique. Cette personnalisation garantit un design épuré et visuellement agréable tout en conservant la fonctionnalité de saisie numérique attendue.

De plus, pour résoudre complètement l'espace indésirable adjacent au champ de saisie, il est nécessaire de réinitialiser la marge non seulement sur la saisie elle-même mais aussi sur les boutons spin. L'extrait CSS suivant accomplit cela :

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

En ajustant à la fois l'apparence et la marge des boutons de rotation, un champ de saisie numérique entièrement optimisé est obtenu, améliorant l'expérience utilisateur pour les visiteurs mobiles et de bureau.

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!