Existe uma maneira consistente através dos navegadores para esconder as novas caixas de rotação que alguns navegadores (tais como o Chrome) apresentam para a entrada do tipo de número HTML? Estou procurando por um método CSS ou JavaScript para evitar que as setas para cima/para baixo apareçam.
<input id="test" type="number">
Este CSS esconde efetivamente o botão spin-button para navegadores webkit (foram testados no Chrome 7.0.517.44 e Safari Versão 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" />
Você sempre pode usar o inspetor (webkit, possivelmente Firebug para Firefox) para procurar propriedades CSS combinadas para os elementos que você está interessado, procure por elementos Pseudo. Esta imagem mostra resultados para um elemento de entrada tipo="número":
De acordo com Guia de codificação de experiência do usuário Apple para Safari móvel, você pode usar o seguinte para exibir um teclado numérico no navegador do iPhone:
<input type="text" pattern="[0-9]*" />
Um "padrão" de "d" também vai funcionar.
Não é o que você pediu, mas eu faço isso por causa de um bug de foco no WebKit com 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";
}
Pode dar-lhe uma ideia para ajudar com o que precisa.