Ocultar Spinner no número de entrada - Firefox 29

202

No Firefox 28, estou usando <input type="number">ótimos trabalhos, pois exibe o teclado numérico nos campos de entrada que devem conter apenas números.

No Firefox 29, o uso de entradas numéricas exibe botões giratórios 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 a 10 dígitos.

É possível desativar isso com CSS ou jQuery?

jquery css firefox input spinner NereuJunior
fonte
2
Se você não quiser as setas de giro, não use type="number". Você pode usar type="text"e o patternatributo para definir uma regex para garantir que seja um número.
Foguete Hazmat
4
-webkit-botão de rotação interno -webkit-botão de rotação externa com -webkit-aparecimento: nenhum; margem: 0; Não trabalhe no Firefox.
NereuJunior
12
@RocketHazmat: type="number"é necessário para os navegadores móveis mostrarem o teclado numérico em vez do teclado completo.
CodeManX
3
<input type="tel">são apenas números e não inclui giradores.
TomasVeras
5
Mudar type="text"é uma péssima idéia, pois os dispositivos sensíveis ao toque mostrarão o teclado errado.
WhyNotHugo

Respostas:

523

De acordo com este post do blog , você precisa definir -moz-appearance:textfield;o input.

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" step="0.01"/>
Expandir snippet

Richard Deeming
fonte
1
Eu envolvi isso @-moz-document url-prefix() { ... }e ele faz o que eu quero: oculta os controles giratórios no Firefox, onde ficam mal, mas os mantém vivos em outros navegadores, incluindo os que trazem o teclado numérico como o OP mencionado.
Michael Scheper
4
Mais algumas informações úteis a partir de Geoff Graham: Entradas numéricos - Uma comparação de padrões do navegador
Richard Deeming
3
isso funciona e, de fato, remove os giradores, mas agora você pode inserir caracteres alfanuméricos nele. Espero que alguém encontre uma maneira de lidar com esse cenário sem precisar verificar as teclas digitadas, se são números ou não.
Jovanni G
1
@JovanniG: Mesmo se você não remover os giradores, ainda poderá inserir caracteres não numéricos na entrada do Firefox. Experimente com a demonstração no MDN . O Chrome impede entrada não numérica nos dois exemplos.
Richard Deeming
1
@alxndr: Além disso, eu tentei o "snippet de código de execução" no Chrome 66 e funciona conforme o esperado.
Richard Deeming
50

Vale ressaltar que o valor padrão -moz-appearancedesses elementos está number-inputno Firefox.

Se você deseja ocultar o botão giratório por padrão, pode configurá-lo -moz-appearance: textfieldinicialmente e se deseja que o botão giratório apareça em :hover/ :focus, você pode substituir o estilo anterior por -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>
Expandir snippet

Eu pensei que alguém poderia achar isso útil, já que recentemente tive que fazer isso na tentativa de melhorar a consistência entre o Chrome / FF (já que esse é o modo como as entradas de número se comportam por padrão no Chrome).

Se você deseja ver todos os valores disponíveis -moz-appearance, pode encontrá-los aqui (mdn).

Josh Crozier
fonte
11

Em SASS/ SCSSstyle, você pode escrever assim:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Definitivamente esse estilo de código pode ser usado no PostCSS.

AmerllicA
fonte
7 
/* for chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;}             


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}
navin prakash
fonte
3

Diante do mesmo problema após a atualização do Firefox para 29.0.1, ela também está listada aqui https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Soluções: Eles (pessoal da Mozilla) corrigiram isso introduzindo suporte para "-moz-aparecimento" para <input type="number"> . Você só precisa ter um estilo associado ao seu campo de entrada com " -moz-appearance:textfield;".

Eu prefiro a maneira CSS Ex: -

.input-mini{
-moz-appearance:textfield;}

Ou

Você também pode fazer isso em linha:

<input type="number" style="-moz-appearance: textfield">
Abhijeet
fonte
0

Misturei algumas respostas das respostas acima e de Como remover as setas da entrada [type = "number"] no Opera no scss:

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

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari
Darex1991
fonte