Nascondi lo spinner nel numero di input

202

Su Firefox 28, sto usando <input type="number">funziona alla grande perché porta la tastiera numerica nei campi di input che dovrebbe contenere solo numeri.

In Firefox 29, l'utilizzo degli input numerici visualizza 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 ~ 10 cifre comunque.

È possibile disabilitarlo con CSS o jQuery?

— NereuJunior
fonte

2

Se non si desidera utilizzare le frecce di selezione, non utilizzare type="number". È possibile utilizzare type="text"e l' patternattributo per impostare una regex per assicurarsi che sia un numero.

— Rocket Hazmat,

4

-webkit-inner-spin-button -webkit-external-spin-button con aspetto -webkit: none; margine: 0; Non funziona in Firefox.

— NereuJunior

12

@RocketHazmat: type="number"è richiesto per i browser mobili per mostrare la tastiera numerica anziché la tastiera completa.

— CodeManX

3

<input type="tel">sono solo numeri e non includono i filatori.

— TomasVeras,

5

Cambiare type="text"è una cattiva idea perché i dispositivi touch mostreranno la tastiera sbagliata.

— WhyNotHugo,

522

Secondo questo post del blog , è necessario impostare -moz-appearance:textfield;il input.

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

<input type="number" step="0.01"/>

Espandi frammento

— Richard Deeming
fonte

1

L'ho inserito @-moz-document url-prefix() { ... }e fa quello che voglio: nasconde i filatori in Firefox, dove sembrano cattivi, ma li tengono in vita in altri browser, compresi quelli che richiamano la tastiera numerica come menzionato dall'OP.

— Michael Scheper,

4

Alcune informazioni più utili da Geoff Graham: Input numerici - Un confronto tra i valori predefiniti del browser

— Richard Deeming

3

funziona e in effetti rimuove i filatori, ma ora puoi inserire caratteri alfanumerici. Spero che qualcuno trovi un modo per gestire quello scenario senza dover controllare le chiavi inserite se sono numeri o no.

— Jovanni G,

1

@JovanniG: anche se non rimuovi i filatori, puoi comunque inserire caratteri non numerici nell'input in Firefox. Provalo con la demo su MDN . Chrome impedisce input non numerici in entrambi gli esempi.

— Richard Deeming,

1

@alxndr: Inoltre, ho appena provato lo "Esegui snippet di codice" in Chrome 66 e funziona come previsto.

— Richard Deeming,

50

Vale la pena sottolineare che il valore predefinito di -moz-appearancesu questi elementi è number-inputin Firefox.

Se si desidera nascondere la trottola per impostazione predefinita, è possibile impostare -moz-appearance: textfieldinizialmente e se si desidera che la trottola appaia su :hover/ :focus, è possibile sovrascrivere lo stile precedente con -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

Espandi frammento

Ho pensato che qualcuno potesse trovare utile dal momento che recentemente ho dovuto farlo nei tentativi di migliorare la coerenza tra Chrome / FF (poiché questo è il modo in cui gli input numerici si comportano di default in Chrome).

Se vuoi vedere tutti i valori disponibili per -moz-appearance, puoi trovarli qui (mdn).

— Josh Crozier
fonte

10

In SASS/ SCSSstyle, puoi scrivere così:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Sicuramente questo stile di codice può essere utilizzato in PostCSS.

— AmerllicA
fonte

7

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}

— navak prakash
fonte

3

Di fronte allo stesso problema dopo l'aggiornamento di Firefox alla 29.0.1, questo è anche elencato qui https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Soluzioni: Loro (ragazzi di Mozilla) hanno risolto il problema introducendo il supporto per "-moz-aspect" per <input type="number">. Devi solo avere uno stile associato al tuo campo di input con " -moz-appearance:textfield;".

Preferisco il modo CSS Ad esempio: -

.input-mini{
-moz-appearance:textfield;}

O

Puoi farlo anche in linea:

<input type="number" style="-moz-appearance: textfield">

— Abhijeet
fonte

0

Ho mescolato alcune risposte dalle risposte sopra e da Come rimuovere le frecce dall'input [type = "number"] in Opera in scss:

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

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

— Darex1991
fonte

0

Questo ha funzionato per me:

    input[type='number'] {
    appearance: none;
}

Risolto in Firefox, Safari, Chrome. Inoltre, -moz-appearance: textfield;non è più supportato ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Yahel Yechieli
fonte

Nascondi lo spinner nel numero di input - Firefox 29