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

¿Existe una forma coherente en todos los navegadores de 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">

preguntado el 24 de septiembre de 10 a las 17:09

¿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 ver un campo de entrada típico con flechas hacia arriba y hacia abajo en el lateral. -

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

Si está utilizando entradas numéricas, asegúrese de usar algo que funcione bien con los navegadores modernos de iOS, Android y escritorio: <input type="number" pattern="[0-9]*" inputmode="numeric">. Más información: stackoverflow.com/a/31619311/806956 -

Lo que sugiero hacer es escribir el marcado en la línea de <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > y utilizando Validación de jQuery o similar para manejar la validación. No he probado este enfoque, por lo que es un comentario, más que una respuesta. -

19 Respuestas

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)

Respondido 11 Feb 19, 11:02

Parece que Chrome ya no tiene ningún problema, por lo que puede usar display: none; como lo único dentro del selector - filfreo

Desafortunadamente, esto no es para varios navegadores, por lo que desaconsejaría usar type=number si tienes 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

Necesito usar el max= y min= atributos en <input> soluciones alternativas como type="text" no son HTML5 válidos. La gente también menciona a Opera, incluidos estos hilanderos. ¿Existe una solución para Opera similar a Safari / Chrome? - unode

para el registro, Chrome también tiene input::-webkit-clear-button para el botón X - aldo.roman.nurena

A partir de 2019, esto no me funcionó en Firefox. Esta solución funcionó para mí: stackoverflow.com/questions/45396280/… - lwitzel

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

respondido 27 mar '18, 11:03

Eso más el 'margen: 0' de la respuesta de antonj es lo que usé - Asfa y Qazi

Lo usé sin el margen y parece estar bien (mayo de 2020). - Croraf

tbh, ¿cuál es el punto de deshabilitar las teclas de flecha solo para que vuelva a un campo de texto? dy_sk

type = "number" también agrega validación, y en dispositivos móviles mostrará el teclado numérico en lugar de un teclado normal. - Swehren

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) del -moz-appearance perfecta en estos elementos es number-input. Cambiando eso al valor textfield elimina eficazmente la ruleta.

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

En algunos casos, es posible que desee ocultar la ruleta. posiblemente, y luego aparecer en hover / focus. (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) del -webkit-appearance perfecta en estos elementos ya está textfield. Para quitar la ruleta, el -webkit-appearance el valor de la propiedad debe cambiarse a none al ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudoclases (es -webkit-appearance: inner-spin-button por defecto).

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: 0 se utiliza para eliminar el margen en mayor versiones 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;
}

Respondido el 20 de junio de 20 a las 10:06

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

agregue un! importante para la solución de Firefox. COMO ESTO ===> input [type = "número"] {-moz-apariencia: campo de texto! importante; } - Sajad Saderi

La letra "E" todavía se puede teclear, extraño. - dy_sk

@addy_sk - eso se debe a notación cientifica (Es decir, 1.314E+10 => 13140000000). - jose crozier

Según Guía de codificación de la experiencia del usuario de Apple para Safari móvil, puede utilizar lo siguiente para mostrar un teclado numérico en el navegador del iPhone:

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

A pattern of \d* también funcionará.

Respondido 15 ago 13, 23:08

A pesar de lo anterior, la solución comprobada funciona muy bien para el problema dado, decidí cambiar a esta solución, aquí. Una razón es que, por ejemplo, el navegador Opera también muestra las flechas, lo que también debe evitar. En segundo lugar, observé problemas mayores en Chrome 17. Allí, por un lado, el atributo 'maxlen' parece no funcionar más; puede ingresar tantos caracteres como desee allí. Por otro lado, los números que exceden una cierta longitud simplemente se redondean. Usar esta solución para "simplemente abrir el teclado numérico en un dispositivo iOS" parece ser más seguro para mí. - Ene

También utilicé estas soluciones, ya que tenía un JS que formateó el número en el campo de entrada cuando escribí y eso no funcionó con un campo numérico. Así que este funcionó a las mil maravillas. - tokimon

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. - Rory O'Kane

Aquí hay una buena solución tanto para Android como para iOS: stackoverflow.com/a/31619311/806956 - aarón gris

Sin embargo, @AaronGray vuelve al punto de partida: esa solución tiene hilanderos para el escritorio. - voluntad extraña

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

Respondido el 06 de junio de 18 a las 10:06

Esta solución actualmente no realiza ninguna validación en ningún navegador como type=number lo hace. - Pippin

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.) - Rory O'Kane

no hay "." en el teclado tel: - <- gion_13

@ RoryO'Kane El teclado numérico tiene una gran desventaja de que negará cualquier entrada que no sea estrictamente un número. - Jochem Kuijpers

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. - Vasil Popov

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

Respondido el 03 de junio de 20 a las 19:06

Si bien esto mostrará un teclado numérico en los teléfonos móviles, permitirá caracteres alfabéticos en el escritorio en Chrome. Después de probar la respuesta más aceptada, parece que Firefox permite alfa en los tipos de números de forma predeterminada, por lo que debe manejarlo de todos modos. Esta solución parece ser la más sencilla. - Luke

tecnología.blog.gov.uk/2020/02/24/… explica por qué el gobierno del Reino Unido cambió de type = "number" a esta solución. - Luke

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

Respondido 08 ago 18, 10:08

según caniuse input[type=number]{ -webkit-appearance } debería ser suficiente para Chrome, pero, por supuesto, también debe modificar los pseudo-elementos. ¿Alguna idea de por qué? - chico mayor

He encontrado este problema con un 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"

Entonces puedes ver todo elementos DOM sombreados, por ejemplo, para <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.

Respondido el 30 de diciembre de 15 a las 11:12

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.

Respondido 08 Oct 10, 12:10

Esto no es exactamente de lo que estaba hablando, pero debido a la falta actual de estandarización de HTML5, esta es la mejor solución presentada. Proporcionar un sitio diferente para dispositivos móviles que para computadoras de escritorio (sin importar cómo se implemente) parece ser la única forma de lograr esto actualmente. Sin embargo, tuve que crear una copia del elemento y cambiar el valor de 'tipo' antes de agregarlo al DOM. Dado que IE no permite modificar el tipo de una entrada una vez que el elemento se ha agregado al dom. - Alan

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

Respondido el 22 de Septiembre de 17 a las 10:09

¿qué margin: 0 ¿realizar? también el spin-button los pseudoelementos no parecen activarse por hover en los navegadores más nuevos? - chico mayor

En Firefox para Ubuntu, simplemente usando

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

hizo el truco para mí.

Adición

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

Me llevaría a

Pseudoclase o pseudo-elemento desconocido '-webkit-external-spin-button'. Conjunto de reglas ignorado debido al mal selector.

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

respondido 18 nov., 16:21

-webkit-* es para Chrome, -moz-* es para mozilla firefox. Por eso no funcionó para ti. - Gusstavv Gil

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

respondido 30 mar '20, 22:03

¿En qué navegadores funcionará esto dado el uso de webkit? Al responder una pregunta de nueve años con catorce respuestas existentes, es importante agregar una explicación de cómo y por qué funciona su respuesta y mencionar qué aspecto nuevo de la pregunta responde. - jason aller

Para que esto funcione en Safari, encontré que agregar! Importante al ajuste del webkit obliga a ocultar el botón giratorio.

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.

Respondido 03 Jul 14, 01:07

Esta respuesta ya se ha dado varias veces. Es útil leer las respuestas existentes antes de proporcionar una nueva, en caso de que la nueva sea un duplicado: vsync

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

Respondido el 26 de Septiembre de 16 a las 13:09

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: none fue clave para mí.

Respondido el 31 de diciembre de 19 a las 07:12

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

respondido 27 mar '18, 11:03

Esta respuesta ya se ha dado varias veces. Es útil leer las respuestas existentes antes de proporcionar una nueva, en caso de que la nueva sea un duplicado. - Dan Dascalescu

Problemas de usabilidad

La <input type=number> resultó ser 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 <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.

respondido 23 mar '21, 07:03

si usa eso, entonces no hace que la flecha del teclado hacia arriba / abajo funcione. ¿Cómo arreglarías esa prueba de usabilidad? - Renán Cidale

El comportamiento de la flecha hacia arriba / hacia abajo en sí mismo causa problemas de usabilidad. Por ejemplo, visitas accidentales o navegadores que convierten números largos en notación exponencial. Este comportamiento parece hacer más daño que bien. - Pepijn Gieles

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

respondido 03 nov., 20:05

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.

Respondido 12 Abr '21, 16:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.