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

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 de número muestra los botones de giro en el lado derecho del campo, que se ve como basura en mi diseño. Realmente no necesito los botones, porque son inútiles cuando necesitas escribir algo como un número de 6~10 dígitos de todos modos.

¿Es posible desactivar esto con CSS o jQuery?

Author: j08691, 2014-04-29
Source

5 answers

De acuerdo con esta entrada de blog, debe establecer -moz-appearance:textfield; en 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"/>
 388
Author: Richard Deeming,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-18 01:07:26

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

Si desea ocultar el spinner de forma predeterminada, puede establecer -moz-appearance: textfield inicialmente, y si desea que el spinner 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 encontrar que útil ya que recientemente tuve que hacer esto en los intentos de mejorar la coherencia entre Chrome / FF (ya que este es el forma en que las entradas de números se comportan por defecto en Chrome).

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

 33
Author: Josh Crozier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-01 01:16:58

En SASS/SCSS estilo, 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.

 5
Author: AngelHotxxx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-09 07:23:59

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

Soluciones: Ellos (los chicos de Mozilla) han arreglado esto introduciendo soporte para "-moz-appearance" 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">
 3
Author: Abhijeet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-20 03:30:37 
/* 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
Author: navin prakash,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-30 10:41:49