¿Puedo ocultar el cuadro de giro de la entrada numérica de HTML5?

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

<input id="test" type="number">
Sebas
Pregunta editada 20º noviembre 2016 в 4:07
Programación
numbers html5 javascript css input
24º septiembre 2010 в 8:58
8 vistas
Solución

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


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none;
Mikael Dúi Bolinder
Respuesta editada 11º febrero 2019 в 11:33
Comentarios (5)

Según la guía de codificación de la experiencia de 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]*" />

Un patrón de d* también funcionará.

Rory O'Kane
Respuesta editada 15º agosto 2013 в 10:22
Comentarios (9)

No es lo que pedías, pero lo hago por un error de enfoque en WebKit con los spinbox:

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

Te puede dar una idea para ayudarte con lo que necesitas.

Comentarios (1)