Kann ich das Drehfeld der HTML5-Zahleingabe ausblenden?

Gibt es eine browserübergreifende Methode, um die neuen Spin-Boxen auszublenden, die einige Browser (z. B. Chrome) für HTML-Eingaben vom Typ Zahl darstellen? Ich suche nach einer CSS- oder JavaScript-Methode, um zu verhindern, dass die Auf- und Abwärtspfeile angezeigt werden.

<input id="test" type="number">
Sebas
Bearbeitete Frage 20. November 2016 в 4:07
Programmierung
numbers html5 javascript css input
24. September 2010 в 8:58
16 Aufrufe
Lösung

Dieses CSS blendet den Spin-Button für Webkit-Browser effektiv aus (ich habe es 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;
Mikael Dúi Bolinder
Bearbeitete Antwort 11. Februar 2019 в 11:33
Kommentare (5)

Laut Apple's user experience coding guide for mobile Safari können Sie folgendes verwenden, um eine numerische Tastatur im iPhone-Browser anzuzeigen:

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

Ein Pattern von \d* wird auch funktionieren.

Rory O'Kane
Bearbeitete Antwort 15. August 2013 в 10:22
Kommentare (9)

Nicht das, wonach Sie gefragt haben, aber ich mache das wegen eines Fokus-Bugs 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, die Ihnen hilft, was Sie brauchen.

Kommentare (1)