Kann ich das Drehfeld der HTML5-Zahleneingabe ausblenden?

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

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

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

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

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.

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.

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

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>

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

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.

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

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.

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.

Ä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

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

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.

Ich fand eine super einfache Lösung mit

<input type="text" inputmode="numeric" />

Dies wird von den meisten Browsern unterstützt: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode