Home / Programmazione / HTML - CSS / Nascondere lo spinner in una input number
Mattepuffo

Nascondere lo spinner in una input number

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!