Spinner in Eingabenummer ausblenden

202

In Firefox 28 <input type="number">funktioniert es hervorragend, da die numerische Tastatur in Eingabefeldern angezeigt wird, die nur Zahlen enthalten sollten.

In Firefox 29 werden bei Verwendung von Zahleneingaben Drehknöpfe auf der rechten Seite des Felds angezeigt, was in meinem Design wie Mist aussieht. Ich brauche die Tasten wirklich nicht, weil sie nutzlos sind, wenn Sie sowieso so etwas wie eine 6 ~ 10-stellige Zahl schreiben müssen.

Ist es möglich, dies mit CSS oder jQuery zu deaktivieren?

— NereuJunior
quelle

2

Wenn Sie die Drehpfeile nicht möchten, verwenden Sie sie nicht type="number". Mit type="text"und dem patternAttribut können Sie einen regulären Ausdruck festlegen, um sicherzustellen, dass es sich um eine Zahl handelt.

— Rocket Hazmat

4

-Webkit-Inner-Spin-Button -Webkit-Outer-Spin-Button mit -Webkit-Erscheinungsbild: keine; Rand: 0; Arbeiten Sie nicht in Firefox.

— NereuJunior

12

@RocketHazmat: type="number"ist erforderlich, damit mobile Browser die numerische Tastatur anstelle der vollständigen Tastatur anzeigen.

— CodeManX

3

<input type="tel">Es sind nur Zahlen und keine Spinner.

— TomasVeras

5

Das Ändern type="text"ist eine schlechte Idee, da Touch-Geräte die falsche Tastatur anzeigen.

— WhyNotHugo

522

Laut diesem Blog-Beitrag müssen Sie -moz-appearance:textfield;auf die setzen 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"/>

Erweitern Sie das Snippet

— Richard Deeming
quelle

1

Ich habe dies eingewickelt @-moz-document url-prefix() { ... }und es macht, was ich will: versteckt die Spinner in Firefox, wo sie schlecht aussehen, aber hält sie in anderen Browsern am Leben, einschließlich solchen, die die numerische Tastatur wie im OP erwähnt aufrufen.

— Michael Scheper

4

Einige weitere nützliche Informationen von Geoff Graham: Numerische Eingaben - Ein Vergleich der Browser-Standardeinstellungen

— Richard Deeming

3

Dies funktioniert und entfernt zwar die Spinner, aber dann können Sie jetzt alphanumerische Zeichen eingeben. Ich hoffe, jemand findet einen Weg, um mit diesem Szenario umzugehen, ohne die eingegebenen Schlüssel überprüfen zu müssen, ob es sich um Zahlen handelt oder nicht.

— Jovanni G

1

@JovanniG: Auch wenn Sie die Spinner nicht entfernen, können Sie in Firefox nicht numerische Zeichen in die Eingabe eingeben. Probieren Sie es mit der Demo auf MDN . Chrome verhindert in beiden Beispielen nicht numerische Eingaben.

— Richard Deeming

1

@alxndr: Außerdem habe ich gerade das "Run Code Snippet" in Chrome 66 ausprobiert und es funktioniert wie erwartet.

— Richard Deeming

50

Es ist erwähnenswert, dass der Standardwert für -moz-appearancediese Elemente number-inputin Firefox ist.

Wenn Sie den Spinner standardmäßig ausblenden möchten, können Sie einstellen , -moz-appearance: textfieldzunächst, und wenn Sie möchten , die Spinner erscheinen auf :hover/ :focus, können Sie die vorherige Styling überschreiben mit -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"/>

Erweitern Sie das Snippet

Ich dachte, jemand könnte dies hilfreich finden, da ich dies kürzlich tun musste, um die Konsistenz zwischen Chrome / FF zu verbessern (da sich Zahleneingaben in Chrome standardmäßig so verhalten).

Wenn Sie alle verfügbaren Werte für anzeigen möchten, -moz-appearancefinden Sie diese hier (mdn).

— Josh Crozier
quelle

11

In SASS/ SCSSstyle können Sie wie folgt schreiben:

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

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

Auf jeden Fall kann dieser Codestil in verwendet werden PostCSS.

— AmerllicA
quelle

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

— navin prakash
quelle

über CSS-Code ist genug, um HTML <input type = "number"> Spinner zu verbergen

— navin prakash

3

Das gleiche Problem nach dem Firefox-Update auf 29.0.1 ist auch hier aufgeführt: https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Lösungen: Sie (Mozilla-Leute) haben dies behoben, indem sie Unterstützung für "-moz-Erscheinungsbild" für eingeführt haben <input type="number">. Sie müssen Ihrem Eingabefeld lediglich einen Stil mit " -moz-appearance:textfield;" zuordnen.

Ich bevorzuge den CSS-Weg. ZB: -

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

Oder

Sie können es auch inline tun:

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

— Abhijeet
quelle

0

Ich habe einige Antworten aus den obigen Antworten und aus So entfernen Sie die Pfeile aus der Eingabe [type = "number"] in Opera in scss gemischt:

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
quelle

0

Das hat bei mir funktioniert:

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

Gelöst in Firefox, Safari, Chrome. Wird auch -moz-appearance: textfield;nicht mehr unterstützt ( https://developer.mozilla.org/en-US/docs/Web/CSS/appearance )

— Yahel Yechieli
quelle

Spinner in Eingabenummer ausblenden - Firefox 29