Retirer les flèches des inputs number en CSS
Les input[type="number"]
en html5 affichent des champs contraints à des valeurs numériques, sélectionnables grâce à de petites flèches incrémentant ou décrémentant la valeur. Voici comment les masquer en CSS.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Chrome */ input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; } /* Opéra*/ input::-o-inner-spin-button, input::-o-outer-spin-button { -o-appearance: none; margin:0 } |
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
input{ /* Firefox */ -moz-appearance: textfield; /* Chrome */ &::-webkit-inner-spin-button { -webkit-appearance: none; margin:0; } /* Opéra*/ &::-o-inner-spin-button { -o-appearance: none; margin: 0; } } |