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?


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"/>


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"/>

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).


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.


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;}

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">

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.