Retirer les flèches des inputs number

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

/* 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

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; 
	}
}