C'è un modo coerente tra i browser per nascondere le nuove caselle di rotazione che alcuni browser (come Chrome) rendono per l'input HTML di tipo numero? Sto cercando un metodo CSS o JavaScript per evitare che le frecce su/giù appaiano.
<input id="test" type="number">
Questo CSS nasconde efficacemente il pulsante di rotazione per i browser webkit (l'ho testato in Chrome 7.0.517.44 e Safari versione 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" />
Puoi sempre usare l'ispettore (webkit, eventualmente Firebug per Firefox) per cercare le proprietà CSS abbinate per gli elementi che ti interessano, cerca gli elementi Pseudo. Questa immagine mostra i risultati per un elemento di input type="number":
Secondo la guida alla codifica dell'esperienza utente di Apple per Safari mobile, è possibile utilizzare quanto segue per visualizzare una tastiera numerica nel browser dell'iPhone:
<input type="text" pattern="[0-9]*" />
Funzionerà anche un pattern
di \d*
.
Non è quello che hai chiesto, ma lo faccio a causa di un bug di messa a fuoco in WebKit con le spinbox:
// 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";
}
Potrebbe darti un'idea per aiutarti con quello di cui hai bisogno.