Posso esconder a caixa de rotação da entrada do número HTML5?

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">
Sebas
Pergunta editada :em
Programação
numbers html5 javascript css input
24º setembro 2010 в 8:58
17 vistas
Solução

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;
Mikael Dúi Bolinder
Resposta editada :em
Comentários (5)

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.

Rory O'Kane
Resposta editada :em
Comentários (9)

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.

Comentários (1)