¿Puedo ocultar el cuadro de giro de la entrada del número HTML5?

1133

¿Existe una forma coherente en todos los navegadores para ocultar los nuevos cuadros de número que algunos navegadores (como Chrome) representan para la entrada HTML del número de tipo? Estoy buscando un método CSS o JavaScript para evitar que aparezcan las flechas arriba / abajo.

<input id="test" type="number">
4
  • 2
    ¿Puedes publicar un ejemplo del código que estás usando? Una captura de pantalla también sería genial para que sepamos lo que está viendo. Estoy mirando <input type="number" min="4" max="8" />en Chrome y veo un campo de entrada típico con flechas hacia arriba y hacia abajo en el lateral.
    calvinf
    24/09/10 a las 21:09
  • 90
    Estás viendo exactamente lo que yo estoy viendo. Estoy tratando de mantener el marcado type = number para asegurarme de que los navegadores móviles muestren un teclado apropiado y evitar que aparezcan las flechas hacia arriba y hacia abajo en los navegadores de computadoras.
    Alan
    27/09/10 a las 11:47
  • 5
    Si está utilizando números de entrada, asegúrese de usar algo que juega limpio con IOS modernas, Android y navegadores de escritorio: <input type="number" pattern="[0-9]*" inputmode="numeric">. Más información: stackoverflow.com/a/31619311/806956 24/07/2015 a las 20:40
  • 1
    Lo que sugiero hacer es escribir el marcado a lo largo de las líneas <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > y usar jQuery Validati o similar para manejar la validación. No he probado este enfoque, por lo que es un comentario, más que una respuesta. 14/09/18 a las 16:11
1295

Este CSS oculta efectivamente el botón giratorio para los navegadores webkit (lo he probado en Chrome 7.0.517.44 y Safari Versión 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

Siempre puede usar el inspector (webkit, posiblemente Firebug para Firefox) para buscar propiedades CSS coincidentes para los elementos que le interesan, busque Pseudo elementos. Esta imagen muestra los resultados para un tipo de elemento de entrada = "número":

Inspector para el tipo de entrada = número (Chrome)

3
  • 34
    Parece que Chrome ya no tiene un problema, por lo que puede usarlo display: none;como lo único dentro del selector 11/09/12 a las 18:19
  • 11
    Desafortunadamente, esto no es para varios navegadores, por lo que desaconsejaría usarlo type=numbersi tiene que ocultar estas flechas. Por ejemplo, actualmente todavía se mostrarán en Opera y comenzarán a mostrarse en Firefox, IE, etc. cuando implementen este tipo de entrada.
    mgol
    5 feb 2013 a las 14:44
  • Simplemente use `<input inputmode =" numeric "... /> Ahora tiene un amplio soporte 12 de agosto a las 17:48
455

Firefox 29 actualmente agrega soporte para elementos numéricos, por lo que aquí hay un fragmento para ocultar los marcadores en navegadores basados ​​en webkit y moz:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">
0
392

Respuesta corta:

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

Respuesta más larga:

Para agregar a la respuesta existente ...

Firefox:

En las versiones actuales de Firefox, el valor predeterminado (agente de usuario) de la -moz-appearancepropiedad en estos elementos es number-input. Cambiar eso al valor textfieldelimina efectivamente la ruleta.

input[type="number"] {
    -moz-appearance: textfield;
}

En algunos casos, es posible que desee que la ruleta se oculte inicialmente y luego aparezca al desplazarse / enfocar. (Este es actualmente el comportamiento predeterminado en Chrome). Si es así, puede utilizar lo siguiente:

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

Cromo:

En las versiones actuales de Chrome, el valor predeterminado (agente de usuario) de la -webkit-appearancepropiedad en estos elementos ya es textfield. Para eliminar la ruleta, el -webkit-appearancevalor de la propiedad debe cambiarse a noneen las pseudoclases ::-webkit-outer-spin-button/ ::-webkit-inner-spin-button(es -webkit-appearance: inner-spin-buttonde forma predeterminada).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<input type="number" />

Vale la pena señalar que margin: 0se usa para eliminar el margen en versiones anteriores de Chrome.

Actualmente, al momento de escribir esto, aquí está el estilo de agente de usuario predeterminado en la pseudoclase 'inner-spin-button':

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
1
  • 20
    Me gusta más esta respuesta porque incluye información relevante de Firefox, que, al desarrollar algo, debe tenerse en cuenta. Las respuestas exclusivas de webkit que ignoran otros motores de navegador dejan mucho que desear.
    RozzA
    4 de agosto de 2016 a las 21:13
134

De acuerdo con la guía de codificación de la experiencia del usuario de Apple para Safari móvil , puede usar lo siguiente para mostrar un teclado numérico en el navegador del iPhone:

<input type="text" pattern="[0-9]*" />

A patternde \d*también funcionará.

1
  • 20
    Actualmente, esto no hace nada en Android, en todos los navegadores. Probado en esta página de prueba en el navegador 4.2.2, Chrome 28 y Firefox 23 en Android 4.2. Esos navegadores solo muestran el teclado de texto estándar con este marcado. 15 de agosto de 2013 a las 16:21
44

Intente usar en su input type="tel"lugar. Aparece un teclado con números y no muestra cuadros de número. No requiere JavaScript, CSS, complementos ni nada más.

4
  • 20
    Esta solución actualmente no realiza ninguna validación en ningún navegador como lo type=numberhace.
    Pepijn
    18/06/2013 a las 10:23
  • 7
    El teclado del teléfono no es tan bueno como el teclado numérico , aunque es mucho mejor que el teclado de texto . El teclado del teléfono tiene letras y símbolos irrelevantes que se omiten en el teclado numérico. (Probado con esta página en Android 4.2.) 15 de agosto de 2013 a las 16:38
  • 17
    no hay "." en el teclado tel: - <
    gion_13
    3 de septiembre de 2013 a las 12:59
  • 6
    Esta no es una solución y, según los estándares HTML5, es una estupidez. input [tel] es para números de teléfono, input [number] es para números genéricos, incluidos los de coma flotante. Entonces esta no es una solución en absoluto. 27/04/15 a las 12:32
37
+50

Encontré una solución súper simple usando

<input type="text" inputmode="numeric" />

Esto es compatible con la mayoría de los navegadores: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

2
  • 5
    technology.blog.gov.uk/2020/02/24/… explica por qué el gobierno del Reino Unido cambió de type = "number" a esta solución.
    Luke
    5/09/20 a las 22:42
  • Todavía puede escribir cualquier carácter si tiene un teclado físico
    vsync
    21 de septiembre a las 19:46
19

Solo agregue este CSS para eliminar la ruleta en la entrada del número

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
0
10

Encontré este problema con a input[type="datetime-local"], que es similar a este problema.

Y encontré una manera de superar este tipo de problemas.

Primero, debe activar la función de raíz de sombra de Chrome en "DevTools -> Configuración -> General -> Elementos -> Mostrar DOM de sombra de agente de usuario"

Luego puede ver todos los elementos DOM sombreados , por ejemplo, porque <input type="number">el elemento completo con DOM sombreado es:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

sombra DOM de entrada [tipo = "número"

Y de acuerdo con esta información, puede crear un borrador de CSS para ocultar elementos no deseados, tal como dijo @Josh.

5

Problemas de usabilidad

Se <input type=number>descubrió que era problemático durante un estudio de usabilidad realizado por el equipo de GOV.UK. Este equipo mantiene uno de los sistemas de diseño más conocidos del mundo y concluye que este tipo de entrada:

Solución alternativa

En cambio, recomiendan usar lo <input type="text" inputmode="numeric" pattern="[0-9]*">que se reduce a las respuestas combinadas de @team_steve y @youjin. Esto no solo oculta los cuadros de giro, sino que también mejora la usabilidad general del elemento.

1
  • Todavía puede escribir caracteres no numéricos, lo cual no es deseado. Lo de la usabilidad no siempre es importante, ya que el efecto de limitación de permitir ingresar solo números, lo cual es una gran ventaja.
    vsync
    21 de septiembre a las 19:49
4

No es lo que pediste, pero hago esto debido a un error de enfoque en WebKit con spinboxes:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Podría darte una idea para ayudarte con lo que necesitas.

0
4

Esta es una mejor respuesta que me gustaría sugerir con el mouse sobre y sin el mouse sobre

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
0
4

Para que esto funcione en Safari, descubrí que agregar !importantal ajuste del kit web obliga a ocultar el botón de giro.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

También sigo teniendo problemas para encontrar una solución para Opera.

0
3

En Firefox para Ubuntu, simplemente usando

    input[type='number'] {
    -moz-appearance:textfield;
}

hizo el truco para mí.

Añadiendo

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Me llevaría a

Unknown pseudo-class or pseudo-element ‘-webkit-outer-spin-button’. Ruleset ignored due to bad selector.

cada vez que lo intenté. Lo mismo ocurre con el botón de giro interior.

0
3

En los navegadores basados ​​en WebKit y Blink y en todo tipo de navegadores, utilice el siguiente CSS:

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
1
  • otros escribieron lo mismo años antes, entonces, ¿por qué decidiste agregar esto todavía?
    vsync
    21 de septiembre a las 19:49
2

Tal vez cambie la entrada de números con javascript a entrada de texto cuando no desee una ruleta;

document.getElementById('myinput').type = 'text';

y evitar que el usuario ingrese texto;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

luego haga que el javascript lo cambie de nuevo en caso de que quiera una ruleta;

document.getElementById('myinput').type = 'number';

funcionó bien para mis propósitos

0
2

Necesitaba que esto funcionara

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

La línea extra de appearance: nonefue clave para mí.

1

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
0
0

Esto como su código css:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
0

Para mí, en Chrome, nada ha funcionado, pero display: none.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Créditos a @philfreo por señalarlo en los comentarios.

0
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Fuente