Comment puis-je masquer la zone de sélection sur les entrées numériques HTML5 ?

Masquer la boîte de sélection de la saisie numérique HTML5

Les navigateurs modernes comme Chrome affichent souvent des boîtes de sélection à côté des entrées numériques HTML5 pour un ajustement pratique des valeurs. Cependant, ces boîtes de sélection peuvent parfois interférer avec les interfaces utilisateur.

Une méthode pour masquer les boîtes de sélection consiste à utiliser CSS :

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

Ce CSS masque efficacement les boîtes de sélection dans les navigateurs Webkit (par ex. , Chrome et Safari) tout en assurant la compatibilité avec Firefox en utilisant la propriété -moz-apparence:textfield.

En implémentant ce CSS, vous pouvez empêcher l'affichage de flèches haut/bas, offrant une interface utilisateur plus propre et plus rationalisée pour vos saisies numériques.

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!