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

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

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

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

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

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

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.

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

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>

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

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.

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

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.

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.

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

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

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

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