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

Existe uma maneira consistente entre os navegadores para ocultar as novas caixas de rotação que alguns navegadores (como o Chrome) processam para entrada HTML do número do tipo? Estou procurando um método CSS ou JavaScript para impedir que as setas para cima / para baixo apareçam.

<input id="test" type="number">

Esse CSS oculta efetivamente o botão de rotação dos navegadores de kit da web (foi testado no Chrome 7.0.517.44 e no 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 for Firefox) para procurar propriedades CSS correspondentes aos elementos nos quais está interessado, procurar por pseudo-elementos. Esta imagem mostra resultados para um elemento de entrada type = "number":

O Firefox 29 atualmente adiciona suporte para elementos numéricos, então aqui está um trecho para ocultar os giradores em navegadores baseados em webkit e moz:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

<input id="test" type="number">

Resposta curta:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" />

Resposta mais longa:

Para adicionar à resposta existente ...

Raposa de fogo:

Nas versões atuais do Firefox, o valor padrão (agente do usuário) da -moz-appearancepropriedade nesses elementos é number-input. Alterar isso para o valor textfieldefetivamente remove o botão giratório.

input[type="number"] {
    -moz-appearance: textfield;
}

Em alguns casos, convém que o botão giratório fique oculto inicialmente e apareça em foco / foco. (Este é atualmente o comportamento padrão no Chrome). Nesse caso, você pode usar o seguinte:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

Cromada:

Nas versões atuais do Chrome, o valor padrão (agente do usuário) da -webkit-appearancepropriedade nesses elementos já é textfield. Para remover o controle giratório, o -webkit-appearancevalor da propriedade precisa ser alterado para nonenas ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo classes (é -webkit-appearance: inner-spin-buttonpor padrão).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

<input type="number" />

Vale ressaltar que margin: 0é usado para remover a margem nos antigos versões antigas do Chrome.

Atualmente, ao escrever isso, aqui está o estilo padrão do agente do usuário na pseudo classe 'inner-spin-button':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

De acordo com o guia de codificação da experiência do usuário da Apple para o 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 patternde \d*também irá funcionar.

Tente usar em seu input type="tel"lugar. Ele exibe um teclado com números e não mostra caixas de rolagem. Não requer JavaScript, CSS, plugins ou qualquer outra coisa.

Adicione apenas este css para remover o girador na entrada do número

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Eu encontrei esse problema com um input[type="datetime-local"], que é semelhante a esse problema.

E eu encontrei uma maneira de superar esse tipo de problema.

Primeiro, você deve ativar o recurso de raiz de sombra do chrome em "DevTools -> Configurações -> Geral -> Elementos -> Mostrar DOM do agente do usuário"

Então você pode ver todos os elementos DOM sombreados , por exemplo, para <input type="number">, o elemento completo com DOM sombreado é:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

E de acordo com essas informações, você pode criar um CSS para ocultar elementos indesejados, como disse o @Josh.

Não é o que você pediu, mas faço isso por causa de um bug de foco no WebKit com caixas de rotação:

// 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 uma idéia para ajudar com o que você precisa.

Esta é uma resposta melhor que eu gostaria de sugerir sobre o mouse e sem o mouse

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }

Para fazer isso funcionar no Safari, achei que adicionar! Important ao ajuste do kit da web força o botão de rotação a ficar oculto.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Ainda estou tendo problemas para encontrar uma solução para o Opera.

No Firefox para Ubuntu, apenas usando

    input[type='number'] {
    -moz-appearance:textfield;
}

fez o truque para mim.

Adicionando

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Me levaria a

Pseudo-classe ou pseudo-elemento desconhecido '-webkit-outer-spin-button'. Conjunto de regras ignorado devido a um seletor incorreto.

toda vez que eu tentava. O mesmo para o botão de rotação interna.

Talvez altere a entrada de número com javascript para entrada de texto quando você não quiser um girador;

document.getElementById('myinput').type = 'text';

e pare o usuário digitando texto;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

faça com que o javascript mude novamente, caso você queira um girador;

document.getElementById('myinput').type = 'number';

funcionou bem para os meus propósitos

Nos navegadores WebKit e Blink, e Todo o tipo de navegador, use o seguinte CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Eu precisava disso para funcionar

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

A linha extra de appearance: noneera a chave para mim.

Encontrei uma solução super simples usando

<input type="text" inputmode="numeric" />

Isso é suportado na maioria dos navegadores: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode