¿Puedo ocultar el cuadro giratorio de entrada de números HTML5?
¿Existe una forma coherente en todos los navegadores de ocultar los nuevos cuadros 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 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 puedes usar el inspector (webkit, posiblemente Firebug para Firefox) para buscar propiedades CSS coincidentes para los elementos que te interesan, busca pseudoelementos. Esta imagen muestra resultados para un elemento de entrada tipo="número":
Firefox 29 actualmente agrega soporte para elementos numéricos, por lo que aquí hay un fragmento para ocultar los hilanderos 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">