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

Remplacement des boutons rotatifs de Webkit sur le type de saisie « numéro »

Mobile Safari fournit un clavier numérique optimisé pour les mobiles pour les champs de saisie désignés comme « numéro » " taper. Cependant, sur Chrome et Safari, les plates-formes de navigateur utilisent des boutons rotatifs pour incrémenter ou décrémenter le nombre affiché, ce qui peut perturber certaines esthétiques de conception.

Pour désactiver ces boutons rotatifs, des techniques CSS peuvent être utilisées. La solution consiste à modifier l'apparence et la marge du spinner du champ de saisie :

input[type=number]::-webkit-outer-spin-button {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">-webkit-appearance: none;
margin: 0;

Copier après la connexion

>

En définissant -webkit-apparence sur none, les boutons de rotation disparaîtront visuellement. De plus, définir la marge sur 0 garantit qu'il n'y a pas d'espace inutile à droite du champ de saisie. Cette solution dissimule efficacement les boutons rotatifs, personnalisant l'apparence de l'entrée pour répondre aux exigences de conception.

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!