Disabilitare i pulsanti di selezione di webkit su input type = "number"?

203

Ho un sito che è principalmente per utenti mobili ma anche desktop.

Su Mobile Safari, l'utilizzo <input type="number">funziona alla grande perché porta la tastiera numerica su campi di input che dovrebbero contenere solo numeri.

In Chrome e Safari, tuttavia, l'utilizzo degli input numerici mostra i pulsanti di selezione sul lato destro del campo, che sembrano schifo nel mio design. Non ho davvero bisogno dei pulsanti, perché sono inutili quando devi scrivere qualcosa come un numero di 6 cifre.

È possibile disabilitare questo con -webkit-appearanceo qualche altro trucco CSS? Ho provato senza molta fortuna.

css html webkit

— POJO
fonte

15

Se si preferisce utilizzare type="text"per altri motivi e si è passati al numero solo per la funzione di tastiera numerica, è possibile utilizzare pattern="[0-9]*"per ottenere la funzione di tastiera, che consente di conservare type="text". Vedere stackoverflow.com/questions/6171903/...

— joshuahedlund

114

I css seguenti funzionano sia per Chrome che per Firefox

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

— Rolwin Crasta
fonte

8

soluzione migliore di quanto sopra (più completa)

— aqm

-moz-aspetto: campo di testo; Inoltre è stata l'unica risposta che ha funzionato per me. Grazie!

— Nanoripper,

283

Ho scoperto che esiste una seconda parte della risposta a questo.

La prima parte mi ha aiutato, ma avevo ancora uno spazio a destra del mio type=numberinput. Avevo azzerato il margine sull'input, ma a quanto pare ho dovuto azzerare anche il margine sullo spinner.

Questo risolto:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

— Bob Spryn
fonte

Eccezionale. Ho avuto un problema simile , ma con una strategia CSS leggermente diversa, che porta a problemi completamente nuovi ...

— Lukas Eder,

1

Qualcuno conosce un modo per correggere il comportamento di scorrimento in cui è possibile scorrere su e giù all'infinito? Ho impostato min=0.01(e maxsu un valore arbitrario) nel mio elemento di input, ma preferirei che la rotellina scorresse su e giù nella pagina. Sto usando AngularJS e non riesco a trovare nulla atm.

— JaKXz,

2

Collegamento a una fonte autorevole per questo problema specifico e questo tipo di informazioni: css-tricks.com/snippets/css/turn-off-number-input-spinners

— Josh Habdas

1

per essere chiari, questo non rimuove la funzionalità di scorrimento del mouse!

— babalu,

1

-moz-aspetto: campo di testo per Firefox

— Kevin Suttle

16

Non sono sicuro se questo è il modo migliore per farlo, ma questo fa scomparire i filatori su Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

— robertc
fonte

@JethroLarson A cosa non funziona? Potresti -webkit-outer-spin-buttoninvece provare .

— robertc,

questo ha funzionato benissimo per type = "date": input [type = date] :: - webkit-outer-spin-button {-webkit-aspect: none; }

— uglymunky

11

Sembra impossibile impedire ai filatori di apparire in Opera. Come soluzione temporanea, puoi fare spazio ai filatori. Per quanto ne so, il seguente CSS aggiunge solo abbastanza riempimento, solo in Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

— Goulven
fonte

4

@Knu In effetti, ma vale la pena menzionarlo qui perché il codice nella risposta rende gli input inutilizzabili con Opera.

— Goulven,

4

@Goulvench, per favore, no :) L'ho trovato molto utile, potrebbe farlo anche qualcun altro.

— dal

-2

Puoi anche nascondere il filatore con il seguente trucco:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}

— Sébastien Varinois
fonte