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">
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; <- 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, eventuell Firebug für Firefox) verwenden, um nach übereinstimmenden CSS-Eigenschaften für die Elemente zu suchen, an denen Sie interessiert sind, und nach Pseudoelementen suchen. Dieses Bild zeigt die Ergebnisse für ein Eingabeelement type="number":
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.
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.