Nascondere lo spinner in una input number

HTML5 ha portato con se vari nuovi tipi di input.

Uno di questi è l'input number, che è predisposta per avere valori numerici.

Questo fa si che è possibile impostare range, valori massimi e minimi usando gli attributi piuttosto che codice JS.

Ed inoltre su dispositivi mobili verrà aperta la tastiera in modalità numerica.

La cosa che non mi piace molto, è che viene visualizzato anche uno spinner, che in pratica serve per aumentare / diminuire il numero senza scriverlo.

Io invece avevo bisogno di tutte le funzionalità di questa input, ma senza visualizzare lo spinner.

Ecco come fare usando un pò di CSS:

input[type='number'] { -moz-appearance:textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }

Applicate queste regole al vostro foglio di stile e ricaricate la pagina.

Dovreste vedere la input come se fosse una normale input text, ma potendo usare i vari attributi della input number.

Enjoy!