¿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">
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; <- 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 puedes usar el inspector (webkit, posiblemente Firebug para Firefox) para buscar propiedades CSS coincidentes para los elementos que te interesan, busca los Pseudo elementos. Esta imagen muestra los resultados para un elemento de entrada type="number":
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á.
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.