Ocultar Spinner en el número de entrada - Firefox 29

202

En Firefox 28, estoy usando <input type="number">funciona muy bien porque muestra el teclado numérico en los campos de entrada que solo deben contener números.

En Firefox 29, el uso de entradas numéricas muestra botones giratorios en el lado derecho del campo, que parece una mierda en mi diseño. Realmente no necesito los botones, porque de todos modos son inútiles cuando necesitas escribir algo como un número de 6 a 10 dígitos.

¿Es posible deshabilitar esto con CSS o jQuery?

jquery css firefox input spinner NereuJunior
fuente
2
Si no quieres las flechas giratorias, no las uses type="number". Puede usar type="text"y el patternatributo para establecer una expresión regular para asegurarse de que sea un número.
Rocket Hazmat
44
-webkit-inner-spin-button -webkit-external-spin-button con -webkit-apariencia: ninguno; margen: 0; No trabaje en Firefox.
NereuJunior
12
@RocketHazmat: type="number"se requiere para que los navegadores móviles muestren el teclado numérico en lugar del teclado completo.
CodeManX
3
<input type="tel">son solo números y no incluye hiladores.
TomasVeras
55
Cambiar type="text"es una mala idea porque los dispositivos táctiles mostrarán el teclado incorrecto.
WhyNotHugo

Respuestas:

522

De acuerdo con esta publicación de blog , debe configurar -moz-appearance:textfield;el 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 fragmento

Richard Deeming
fuente
1
Envolví esto @-moz-document url-prefix() { ... }y hace lo que quiero: oculta los hilanderos en Firefox, donde se ven mal, pero los mantienen vivos en otros navegadores, incluidos los que muestran el teclado numérico como mencionó el OP.
Michael Scheper el
44
Información adicional más útil de Geoff Graham: Entradas numéricas - Una comparación de los valores predeterminados del navegador
Richard Deeming
3
esto funciona y, de hecho, elimina los hilanderos, pero ahora puede ingresar caracteres alfanuméricos en él. Espero que alguien encuentre una manera de manejar ese escenario sin tener que verificar las teclas ingresadas si son números o no.
Jovanni G
1
@JovanniG: Incluso si no quita los hilanderos, aún puede ingresar caracteres no numéricos en la entrada en Firefox. Pruébelo con la demostración en MDN . Chrome evita la entrada no numérica en ambos ejemplos.
Richard Deeming
1
@alxndr: Además, acabo de probar el "Ejecutar fragmento de código" en Chrome 66 y funciona como se esperaba.
Richard Deeming el
50

Vale la pena señalar que el valor predeterminado de -moz-appearanceestos elementos está number-inputen Firefox.

Si desea ocultar la ruleta de forma predeterminada, puede configurarla -moz-appearance: textfieldinicialmente, y si desea que la ruleta aparezca en :hover/ :focus, puede sobrescribir el estilo anterior con -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 fragmento

Pensé que alguien podría encontrar eso útil ya que recientemente tuve que hacer esto para intentar mejorar la consistencia entre Chrome / FF (ya que esta es la forma en que las entradas numéricas se comportan de manera predeterminada en Chrome).

Si desea ver todos los valores disponibles -moz-appearance, puede encontrarlos aquí (mdn).

Josh Crozier
fuente
10

En SASS/ SCSSstyle, puedes escribir así:

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

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

Definitivamente este estilo de código puede usarse en PostCSS.

AmerllicA
fuente
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
fuente
3

Enfrentó el mismo problema después de la actualización de Firefox a 29.0.1, esto también se enumera aquí https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Soluciones: Ellos (los muchachos de Mozilla) han solucionado esto introduciendo soporte para "-moz-apariencia" para <input type="number">. Solo necesita tener un estilo asociado con su campo de entrada con " -moz-appearance:textfield;".

Prefiero la forma CSS, por ejemplo: -

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

O

También puedes hacerlo en línea:

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

Mezclé algunas respuestas de las respuestas anteriores y de Cómo eliminar las flechas de la entrada [type = "number"] en Opera en 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
fuente