Comment puis-je forcer la visibilité des boutons haut/bas pour les champs de saisie numérique dans tous les navigateurs ?

Pouvez-vous imposer la visibilité des boutons haut/bas pour les champs de saisie numérique ?

Vous souhaitez toujours présenter des flèches haut et bas sur un écran numérique champ de saisie ? Vous avez peut-être rencontré des obstacles ; voici une solution :

HTML:

<code class="html"><input type="number" /></code>

CSS:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: "Always Show Up/Down Arrows";
}</code>

Malheureusement, cette méthode est limitée vers Chrome.

Solution alternative : propriété Opacity

Pour une solution multi-navigateurs, essayez ceci :

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}</code>

Cette méthode force les flèches pour rester visible, mais notez que cela peut ne pas fonctionner dans tous les navigateurs. Envisagez de mettre en œuvre une solution de secours pour les navigateurs non conformes.

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!