Is er een consistente manier voor alle browsers om de nieuwe spinboxen te verbergen die sommige browsers (zoals Chrome) weergeven voor HTML-invoer van het type getal? Ik ben op zoek naar een CSS- of JavaScript-methode om te voorkomen dat de pijlen omhoog/omlaag worden weergegeven.
<input id="test" type="number">
Deze CSS verbergt effectief de spin-knop voor webkit browsers (heb het getest in Chrome 7.0.517.44 en Safari versie 5.0.2 (6533.18.5)):
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" />
U kunt altijd de inspector gebruiken (webkit, mogelijk Firebug voor Firefox) om te zoeken naar overeenkomende CSS-eigenschappen voor de elementen waarin u geïnteresseerd bent, zoek naar Pseudo-elementen. Deze afbeelding toont resultaten voor een input element type="number":
Volgens Apple's handleiding voor het coderen van gebruikerservaringen voor mobiele Safari kun je het volgende gebruiken om een numeriek toetsenbord weer te geven in de iPhone-browser:
<input type="text" pattern="[0-9]*" />
Een patroon
van `d*
werkt ook.
Niet waar je om vroeg, maar ik doe dit vanwege een focus bug in WebKit met spinboxes:
// 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";
}
Het geeft je misschien een idee om te helpen met wat je nodig hebt.