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

985

¿Hay alguna forma coherente entre los navegadores para ocultar los nuevos cuadros de giro 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">
Alan
fuente
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ás 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
77
Estás viendo exactamente lo que estoy viendo. Estoy tratando de mantener el marcado type = number para asegurar que los navegadores móviles muestren un teclado apropiado y eviten que aparezcan las flechas hacia arriba y hacia abajo en los navegadores de las computadoras.
Alan
3
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
Aaron Gray
1
Lo que sugiero hacer es escribir 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 eso es un comentario, en lugar de una respuesta.
Agi Hammerthief

Respuestas:

1141

Este CSS efectivamente oculta 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, buscar Pseudo elementos. Esta imagen muestra resultados para un elemento de entrada type = "number":

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

antonj
fuente
23
Parece que Chrome ya no tiene un problema, por lo que puede usarlo display: none;como lo único dentro del selector
philfreo
99
Desafortunadamente, este no es un navegador cruzado, por lo que aconsejaría no 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
Necesito usar los atributos max=y min=en <input>soluciones alternativas, como type="text"HTML5 no válido. La gente también menciona Opera, incluidos estos hilanderos. ¿Existe una solución para Opera similar a Safari / Chrome?
Unode
2
para el registro, Chrome también tiene input::-webkit-clear-buttonpara el botón X
aldo.roman.nurena
2
A partir de 2019, esto no funcionó para mí en Firefox. Esta solución funcionó para mí: stackoverflow.com/questions/45396280/…
lwitzel
431

Firefox 29 actualmente agrega soporte para elementos numéricos, así que aquí hay un fragmento para ocultar los hilanderos en los navegadores 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">

Swehren
fuente
Eso más el 'margen: 0' de la respuesta de antonj es lo que usé
Asfand Qazi
Lo usé sin margen, y parece estar bien (mayo de 2020).
croraf
359

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 rueda giratoria se oculte inicialmente y luego aparezca al pasar el mouse por encima / enfocar. (Actualmente, este es el comportamiento predeterminado en Chrome). Si es así, puede usar 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 lo es textfield. Para eliminar la ruleta, el -webkit-appearancevalor de la propiedad debe cambiarse noneen ::-webkit-outer-spin-button/ ::-webkit-inner-spin-buttonpseudo clases (es -webkit-appearance: inner-spin-buttonpor 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: 0se utiliza para eliminar el margen en versiones anteriores de Chrome.

Actualmente, al escribir esto, aquí está el estilo de agente de usuario predeterminado en la pseudo clase '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;
}
Josh Crozier
fuente
14
Me gusta más esta respuesta porque incluye información relevante de Firefox que, al desarrollar algo, debe tenerse en cuenta. las respuestas de solo webkit que ignoran otros motores de navegador dejan mucho que desear
RozzA
agregue una solución! important a firefox. COMO ESTE ===> input [type = "number"] {-moz-parecer: textfield! important; }
sajad saderi
126

Según 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á.

equipo_steve
fuente
55
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, que también debe evitar. En segundo lugar, observé problemas mayores en Chrome 17. Allí, por un lado, el atributo 'maxlen' ya no parece funcionar; puedes ingresar tantos caracteres como quieras allí. Por otro lado, los números que exceden 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 algunos JS que formatearon el número en el campo de entrada cuando escribí y eso no funcionó con un campo de número. Así que este funcionó a las mil maravillas.
Tokimon
19
Actualmente, esto no hace nada en Android, en todos los navegadores. Probado en esta página de prueba en Browser 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
3
Aquí hay una buena solución para Android e iOS: stackoverflow.com/a/31619311/806956
Aaron Gray
1
Sin embargo, @AaronGray vuelve al punto de partida: esa solución tiene spinners para el escritorio.
StrangeWill
39

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

MERT DOĞAN
fuente
17
Esta solución actualmente no valida en ningún navegador como lo type=numberhace.
Pepijn
55
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 del teclado numérico. (Probado con esta página en Android 4.2.)
Rory O'Kane
16
no hay "." en el teclado tel: - <
gion_13
1
@ RoryO'Kane El teclado numérico tiene una gran desventaja de que negará cualquier entrada que no sea estrictamente un número.
Jochem Kuijpers
44
Esto no es una solución, y según los estándares HTML5 es estúpido. input [tel] es para números de teléfono, input [número] es para números genéricos, incluidos los de punto flotante. Entonces esta no es una solución en absoluto.
Vasil Popov
17

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;
}
Sanjib Debnath
fuente
según caniuse input[type=number]{ -webkit-appearance }debería ser suficiente para Chrome, pero, por supuesto, también debe modificar los pseudoelementos. alguna idea de por qué?
oldboy
8

He encontrado este problema con un input[type="datetime-local"], que es similar a este problema.

Y he encontrado una manera de superar este tipo de problemas.

Primero, debe activar la función de root de sombra de Chrome mediante "DevTools -> Configuración -> General -> Elementos -> Mostrar DOM de sombra de agente de usuario"

Luego puede ver todos los 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>

SOM DOM de entrada [type = "number"

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

Xiao Hanyu
fuente
3

No es lo que pediste, pero lo hago 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 darle una idea para ayudar con lo que necesita.

Gaurav
fuente
Esto no es exactamente de lo que estaba hablando, pero debido a la actual falta 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
3

Esta es una mejor respuesta que me gustaría sugerir al pasar el mouse y sin pasar el mouse

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; }
Swap-IOS-Android
fuente
¿Qué margin: 0logra? Además, ¿los spin-buttonpseudoelementos no parecen activarse hoveren navegadores más nuevos?
oldboy
2

Para que esto funcione en Safari, encontré que agregar! Importante para el ajuste del kit web 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 */
}

Todavía tengo problemas para encontrar una solución para Opera también.

luckychii
fuente
2

En Firefox para Ubuntu, solo usando

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

hizo el truco para mí

Agregando

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

Me llevaría a

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

Cada vez que lo intenté. Lo mismo para el botón de giro interno.

muchacho
fuente
1
-webkit-*es para Chrome, -moz-*es para mozilla firefox. Por eso no te funcionó.
Gusstavv Gil
2

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

Príncipe Sharma
fuente
66
Esta respuesta ya se ha dado varias veces. Ayuda a leer las respuestas existentes antes de proporcionar una nueva, en caso de que la nueva sea un duplicado.
Dan Dascalescu
1

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

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

y detener al usuario que ingresa el 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 JavaScript lo cambie de nuevo en caso de que quiera un spinner;

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

funcionó bien para mis propósitos

usuario3121518
fuente
1

En los navegadores WebKit y Blink y All Kind Of Browser, use 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; 
}
Sabbir Hossen Chowdhury
fuente
¿En qué navegadores funcionará esto dado el uso 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é nuevo aspecto de la pregunta responde.
Jason Aller
0

Necesitaba esto para trabajar

/* 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í.

Vic
fuente