Comment cacher les flèches dans une zone de saisie de nombre

Apprenez à supprimer les flèches ou les boîtes de défilement d'une zone de saisie de nombre en utilisant CSS.

Essayez de faire glisser la souris sur deux zones de saisie de nombres pour voir la différence :

Flèches cachées :

Par défaut :

Description de la fonction :Lorsque vous faites défiler la molette à l'intérieur d'une zone de saisie de nombre, vous pouvez toujours augmenter le nombre.

Cacher les flèches

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Essayez-le vous-même

Pages associées

Tutoriel :Formulaire HTML

Manuel de référence :HTML <input type="number">