Comment puis-je désactiver les boutons fléchés sur les champs de saisie numérique à l'aide de CSS ?

Astuce CSS pour désactiver les boutons fléchés sur l'attribut Type d'entrée="numéro"

Les utilisateurs rencontrent souvent des boutons fléchés sur les champs de saisie numérique dans les navigateurs de bureau comme Chrome et Safari. Cependant, ces boutons peuvent perturber certaines esthétiques du design. Pouvons-nous les désactiver à l'aide de CSS ?

Solution CSS :

Pour désactiver les boutons rotatifs, nous pouvons utiliser une règle CSS qui cible les différentes parties du champ de saisie :

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

Le ::-webkit-inner-spin-button cible le bouton fléché intérieur, tandis que ::-webkit-outer-spin-button cible le bouton fléché extérieur. En définissant -webkit-apparence sur none, nous masquons les boutons. De plus, définir la marge sur 0 garantit qu'aucun espace supplémentaire n'est laissé après la suppression des boutons.

Un raffinement supplémentaire :

Les utilisateurs ont signalé que même après avoir masqué les boutons, un petit espace restait à droite du champ de saisie. Pour résoudre ce problème, nous devons cibler la marge du spinner lui-même :

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

En appliquant cette règle, nous pouvons éliminer complètement l'espace indésirable, ce qui entraîne une conception plus propre et plus rationalisée pour les champs de saisie numérique.

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!