Kann ich das Drehfeld der HTML5-Zahleneingabe ausblenden?

984

Gibt es eine konsistente Möglichkeit für alle Browser, die neuen Drehfelder auszublenden, die einige Browser (z. B. Chrome) für HTML-Eingaben der Typennummer rendern? Ich suche nach einer CSS- oder JavaScript-Methode, um zu verhindern, dass die Aufwärts- / Abwärtspfeile angezeigt werden.

<input id="test" type="number">
Alan
quelle
2
Können Sie ein Beispiel für den von Ihnen verwendeten Code veröffentlichen? Ein Screenshot wäre auch großartig, damit wir wissen, was Sie sehen. Ich schaue <input type="number" min="4" max="8" />in Chrome und sehe ein typisches Eingabefeld mit Aufwärts- und Abwärtspfeilen an der Seite.
Calvinf
77
Sie sehen genau das, was ich sehe. Ich versuche, das Markup type = number beizubehalten, um sicherzustellen, dass mobile Browser eine geeignete Tastatur aufrufen und verhindern, dass die Aufwärts- und Abwärtspfeile in Computerbrowsern angezeigt werden.
Alan
3
Wenn Sie Zahleneingaben verwenden, stellen Sie sicher, dass Sie etwas verwenden, das mit modernen iOS-, Android- und Desktop-Browsern gut funktioniert : <input type="number" pattern="[0-9]*" inputmode="numeric">. Weitere Informationen: stackoverflow.com/a/31619311/806956
Aaron Gray
1
Ich schlage vor, Markups nach dem Vorbild von jQuery Validati oder ähnlichem zu schreiben <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > und zu verwenden , um die Validierung durchzuführen. Ich habe diesen Ansatz nicht getestet, weshalb dies eher ein Kommentar als eine Antwort ist.
Agi Hammerthief

Antworten:

1141

Dieses CSS verbirgt effektiv den Drehknopf für Webkit-Browser (hat ihn in Chrome 7.0.517.44 und Safari Version 5.0.2 (6533.18.5) getestet):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

Sie können jederzeit den Inspektor (Webkit, möglicherweise Firebug for Firefox) verwenden, um nach übereinstimmenden CSS-Eigenschaften für die Elemente zu suchen, an denen Sie interessiert sind, und nach Pseudoelementen zu suchen. Dieses Bild zeigt Ergebnisse für einen Eingabeelementtyp = "Nummer":

Inspektor für Eingabetyp = Nummer (Chrome)

antonj
quelle
23
Es scheint, dass Chrome kein Problem mehr hat, so dass Sie nur display: none;als einziges
Element
9
Dies ist leider kein Cross-Browser, daher würde ich davon abraten, type=numberwenn Sie diese Pfeile ausblenden müssen. Derzeit werden sie beispielsweise noch in Opera angezeigt und in Firefox, IE usw. angezeigt, wenn sie diesen Eingabetyp implementieren.
mgol
Ich muss die Attribute max=und min=für <input>so alternative Lösungen verwenden, wie z. B. type="text"ungültiges HTML5. Die Leute erwähnen auch Opera, einschließlich dieser Spinner. Gibt es eine ähnliche Lösung für Opera wie Safari / Chrome?
Unode
2
Für die Aufzeichnung hat Chrome auch input::-webkit-clear-buttonfür die X-Schaltfläche
aldo.roman.nurena
2
Ab 2019 hat dies in Firefox bei mir nicht funktioniert. Diese Lösung hat bei mir funktioniert
lwitzel
431

Firefox 29 bietet derzeit Unterstützung für Zahlenelemente. Hier ist ein Ausschnitt zum Ausblenden der Spinner in Webkit- und Moz-basierten Browsern:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

Lieblinge
quelle
Das plus den 'Rand: 0' aus Antonjs Antwort habe ich verwendet
Asfand Qazi
Ich habe es ohne Rand verwendet und scheint in Ordnung zu sein (Mai 2020).
Croraf
359

Kurze Antwort:

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" />

Längere Antwort:

Zur vorhandenen Antwort hinzufügen ...

Feuerfuchs:

In aktuellen Versionen von Firefox ist der Standardwert (Benutzeragent) der -moz-appearanceEigenschaft für diese Elemente number-input. Wenn Sie diesen Wert textfieldändern, wird der Spinner effektiv entfernt.

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

In einigen Fällen können Sie die Spinner versteckt werden zunächst , und dann auf schweben / Fokus erscheinen. (Dies ist derzeit das Standardverhalten in Chrome.) In diesem Fall können Sie Folgendes verwenden:

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


Chrom:

In aktuellen Versionen von Chrome ist der Standardwert (Benutzeragent) der -webkit-appearanceEigenschaft für diese Elemente bereits vorhanden textfield. Um die Spinner zu entfernen, die -webkit-appearanceWert Bedürfnisse der Unterkunft bis geändert werden noneauf den ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonPseudo-Klassen (es ist -webkit-appearance: inner-spin-buttonstandardmäßig aktiviert ).

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

Es sei darauf hingewiesen, dass margin: 0in älteren Versionen von Chrome der Rand entfernt wird .

Derzeit ist hier das Standard-User-Agent-Styling für die Pseudoklasse 'Inner-Spin-Button':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
Josh Crozier
quelle
14
Ich mag diese Antwort besser, weil sie relevante Firefox-Informationen enthält, die bei der Entwicklung von etwas berücksichtigt werden müssen. Nur-Webkit-Antworten, die andere Browser-Engines ignorieren, lassen zu wünschen übrig
RozzA
Fügen Sie der Firefox-Lösung ein! Wichtiges hinzu. WIE DIESES ===> Eingabe [Typ = "Nummer"] {-moz-Erscheinungsbild: Textfeld! Wichtig; }
Sajad Saderi
126

Laut Apples User Experience Coding Guide für Mobile Safari können Sie Folgendes verwenden, um eine numerische Tastatur im iPhone-Browser anzuzeigen:

<input type="text" pattern="[0-9]*" />

Eine patternder \d*wird auch funktionieren.

team_steve
quelle
5
Trotz der oben genannten, überprüften Lösung funktioniert das gegebene Problem sehr gut. Ich habe mich entschlossen, hier zu dieser Lösung zu wechseln. Ein Grund ist, dass zB der Opera-Browser auch die Pfeile anzeigt, die Sie ebenfalls verhindern sollten. Zweitens habe ich in Chrome 17 größere Probleme festgestellt. Einerseits scheint das Attribut 'maxlen' nicht mehr zu funktionieren. Sie können dort so viele Zeichen eingeben, wie Sie möchten. Zahlen, die eine bestimmte Länge überschreiten, werden dagegen einfach gerundet. Die Verwendung dieser Lösung zum "Öffnen des Nummernblocks auf einem iOS-Gerät" scheint für mich sicherer zu sein.
Januar
Ich habe mich auch für diese Lösungen entschieden, da ich einige JS hatte, die die Zahl im Eingabefeld beim Tippen formatierten und die mit einem Zahlenfeld nicht funktionierten. Dieser wirkte also wie ein Zauber.
Tokimon
19
Dies funktioniert derzeit unter Android in allen Browsern nicht. Getestet auf dieser Testseite in Browser 4.2.2, Chrome 28 und Firefox 23 unter Android 4.2. Diese Browser zeigen nur die Standard-Texttastatur mit diesem Markup an.
Rory O'Kane
3
Hier ist eine schöne Lösung für Android und iOS: stackoverflow.com/a/31619311/806956
Aaron Gray
1
@AaronGray zurück zu Punkt eins: Diese Lösung hat Spinner für den Desktop.
StrangeWill
39

Versuchen Sie es input type="tel"stattdessen. Es öffnet sich eine Tastatur mit Zahlen und es werden keine Drehfelder angezeigt. Es erfordert kein JavaScript oder CSS oder Plugins oder irgendetwas anderes.

MERT DOĞAN
quelle
17
Diese Lösung führt derzeit keine Überprüfung in Browsern durch, wie dies der type=numberFall ist.
Pepijn
5
Die Telefontastatur ist nicht so gut wie die Zifferntastatur , obwohl sie weitaus besser ist als die Texttastatur . Die Telefontastatur enthält irrelevante Buchstaben und Symbole, die auf der Zifferntastatur weggelassen werden. (Getestet mit dieser Seite auf Android 4.2.)
Rory O'Kane
16
es gibt kein "." in der Tel-Tastatur: - <
gion_13
1
@ RoryO'Kane Die Zifferntastatur hat einen großen Nachteil, dass sie jede Eingabe verweigert, die nicht ausschließlich eine Zahl ist.
Jochem Kuijpers
4
Dies ist keine Lösung, und nach den HTML5-Standards ist es dumm. Eingabe [tel] ist für Telefonnummern, Eingabe [Nummer] ist für generische Nummern, einschließlich Gleitkommazahlen. Das ist also überhaupt keine Lösung.
Vasil Popov
17

Fügen Sie dieses CSS nur hinzu, um den Spinner bei Eingabe der Zahl zu entfernen

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Sanjib Debnath
quelle
laut caniuse input[type=number]{ -webkit-appearance }sollte für chrom ausreichend sein, aber natürlich muss man auch die pseudo-elemente modifizieren. Irgendeine Idee warum?
Oldboy
8

Ich bin auf dieses Problem mit einem gestoßen input[type="datetime-local"] ähnlich ist.

Und ich habe einen Weg gefunden, diese Art von Problemen zu überwinden.

Zuerst müssen Sie die Shadow-Root-Funktion von Chrome über "DevTools -> Einstellungen -> Allgemein -> Elemente -> Schatten-DOM des Benutzeragenten anzeigen" aktivieren.

Dann können Sie alle schattierten DOM-Elemente sehen , z. B. <input type="number">lautet das vollständige Element mit schattiertem DOM:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

Schatten-DOM der Eingabe [Typ = "Nummer"

Und gemäß diesen Informationen können Sie CSS entwerfen, um unerwünschte Elemente zu verbergen, genau wie @Josh sagte.

Xiao Hanyu
quelle
3

Nicht das, wonach Sie gefragt haben, aber ich mache dies aufgrund eines Fokusfehlers in WebKit mit Spinboxen:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Es könnte Ihnen eine Idee geben, mit dem zu helfen, was Sie brauchen.

Gaurav
quelle
Dies ist nicht genau das, worüber ich gesprochen habe, aber aufgrund der derzeit fehlenden Standardisierung von HTML5 ist dies die beste Lösung. Die Bereitstellung einer anderen Site für Mobilgeräte als für Desktops (unabhängig davon, wie sie implementiert ist) scheint derzeit die einzige Möglichkeit zu sein, dies zu erreichen. Ich musste jedoch eine Kopie des Elements erstellen und den Wert 'type' ändern, bevor ich es dem DOM hinzufügte. Da der IE es nicht zulässt, den Typ einer Eingabe zu ändern, nachdem das Element dem Dom hinzugefügt wurde.
Alan
3

Dies ist eine bessere Antwort, die ich bei Maus über und ohne Maus vorschlagen möchte

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
Swap-IOS-Android
quelle
Was bringt es margin: 0? Auch spin-buttonscheinen die Pseudoelemente hoverin neueren Browsern nicht ausgelöst zu werden?
Oldboy
2

Damit dies in Safari funktioniert, fand ich, dass das Hinzufügen von! Wichtig für die Webkit-Anpassung das Ausblenden des Drehknopfs erzwingt.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Ich habe immer noch Probleme, eine Lösung für Opera zu finden.

Luckychii
quelle
2

Unter Firefox für Ubuntu nur mit

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

hat den Trick für mich gemacht.

Hinzufügen

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Würde mich dazu führen

Unbekannte Pseudoklasse oder Pseudoelement '-webkit-Outer-Spin-Button'. Regelsatz wegen fehlerhafter Auswahl ignoriert.

jedes Mal, wenn ich es versuchte. Gleiches gilt für den inneren Drehknopf.

sonny_boy
quelle
1
-webkit-*ist für Chrome, -moz-*ist für Mozilla Firefox. Deshalb hat es bei Ihnen nicht funktioniert.
Gusstavv Gil
2

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

Prinz Sharma
quelle
6
Diese Antwort wurde bereits mehrmals gegeben. Es ist hilfreich, vorhandene Antworten zu lesen, bevor Sie eine neue Antwort bereitstellen, falls es sich bei der neuen Antwort um ein Duplikat handelt.
Dan Dascalescu
1

Ändern Sie möglicherweise die Zahleneingabe mit Javascript in Texteingabe, wenn Sie keinen Spinner möchten.

document.getElementById('myinput').type = 'text';

und den Benutzer daran hindern, Text einzugeben;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

Lassen Sie das Javascript es dann wieder ändern, falls Sie einen Spinner wollen.

document.getElementById('myinput').type = 'number';

es hat gut für meine Zwecke funktioniert

user3121518
quelle
1

Verwenden Sie in WebKit- und Blink-basierten Browsern und allen Arten von Browsern das folgende CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
Sabbir Hossen Chowdhury
quelle
Auf welchen Browsern funktioniert dies bei Verwendung webkit? Bei der Beantwortung einer neun Jahre alten Frage mit vierzehn vorhandenen Antworten ist es wichtig, eine Erklärung hinzuzufügen, wie und warum Ihre Antwort funktioniert, und zu erwähnen, welchen neuen Aspekt der Frage sie beantwortet.
Jason Aller
0

Ich brauchte das, um zu arbeiten

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

Die zusätzliche Zeile von appearance: nonewar der Schlüssel zu mir.

Vic
quelle