Desativar os botões de rotação do webkit no tipo de entrada = "número"?

203

Eu tenho um site voltado principalmente para usuários móveis, mas também para computadores.

No Mobile Safari, usando <input type="number"> funciona muito bem porque exibe o teclado numérico nos campos de entrada que devem conter apenas números.

No Chrome e Safari, no entanto, o uso de entradas numéricas exibe botões de rotação no lado direito do campo, que parece uma porcaria no meu design. Eu realmente não preciso dos botões, porque eles são inúteis quando você precisa escrever algo como um número de 6 dígitos.

É possível desativar isso com -webkit-appearanceou algum outro truque de CSS? Eu tentei sem muita sorte.

css html webkit pojo
fonte
15
Se você preferir usar type="text"por outros motivos e mudar apenas para o número do recurso de teclado numérico, poderá usá pattern="[0-9]*"-lo para obter o recurso de teclado, permitindo reter type="text". Veja stackoverflow.com/questions/6171903/…
joshuahedlund

Respostas:

114

O css abaixo funciona para Chrome e Firefox

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;
}
Rolwin Crasta
fonte
8
melhor solução do que acima (mais completa)
AQM
-moz-aparecimento: campo de texto; Além disso, foi a única resposta que funcionou para mim. Obrigado!
Nanoripper 12/07/19
283

Eu descobri que há uma segunda parte da resposta para isso.

A primeira parte me ajudou, mas eu ainda tinha um espaço à direita da minhatype=number entrada. Eu tinha zerado a margem na entrada, mas aparentemente eu tinha que zerar a margem também no girador.

Isso corrigiu:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
fonte
Impressionante. Eu tive um problema semelhante , mas com uma estratégia ligeiramente diferente CSS, que levam a problemas inteiramente novos ...
Lukas Eder
1
Alguém sabe uma maneira de corrigir o comportamento de rolagem onde você pode rolar para cima e para baixo infinitamente? Eu configurei min=0.01(e maxcom algum valor arbitrário) no meu elemento de entrada, mas eu prefiro que a roda de rolagem suba e desça a página. Estou usando o AngularJS e não consigo encontrar nada no caixa eletrônico.
JaKXz
2
Ligando de volta para uma fonte autorizada para este problema específico e esse tipo de informação: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
para ficar claro, isso não remove a funcionalidade de rolagem do mouse!
babalu
1
-moz-appearance: TextField para Firefox
Kevin Suttle
16

Não tenho certeza se essa é a melhor maneira de fazer isso, mas isso faz com que os giradores desapareçam no Chrome 8.0.552.5 dev:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
fonte
@JethroLarson No que ele não está funcionando? Você poderia tentar -webkit-outer-spin-button.
Robertc
isso funcionou muito bem para type = "date": input [type = date] :: - botão de rotação externa do webkit {-webkit-aparecimento: nenhum; }
uglymunky
11

Parece impossível impedir que os spinners apareçam no Opera. Como solução temporária, você pode abrir espaço para os giradores. Tanto quanto posso dizer, o seguinte CSS adiciona preenchimento suficiente, apenas no Opera:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
Goulven
fonte
4
@ Knu De fato, mas vale a pena mencionar aqui porque o código na resposta deixa as entradas inutilizáveis ​​com o Opera.
Goulven
4
@Goulvench, por favor, não :) Eu achei muito útil, alguém pode também.
frnhr
-2

Você também pode ocultar o spinner com o seguinte truque:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}
Sébastien Varinois
fonte