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

spinner jquery bootstrap

Question

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

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

¿Es posible desactivar esto con CSS o jQuery?

Answer 1

De acuerdo con esta publicación del blog , debe configurar -moz-appearance:textfield; en la 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"/>

Answer 2

En el estilo SASS / SCSS , puede escribir de esta manera:

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 .

Answer 3

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

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

Prefiero el modo CSS, por ejemplo: -

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

O

Puedes hacerlo en línea también:

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

Answer 4

Vale la pena señalar que el valor predeterminado de -moz-appearance en estos elementos es number-input en Firefox.

Si desea ocultar la ruleta de forma predeterminada, puede configurar -moz-appearance: textfield inicialmente, 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"/>

Pensé que alguien podría encontrarlo útil, ya que recientemente tuve que hacer esto para intentar mejorar la coherencia 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 para -moz-appearance , puede encontrarlos here (mdn).

Answer 5

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