Deshabilitar botones de giro de webkit en input type = “number”?

Tengo un sitio que es principalmente para usuarios de dispositivos móviles pero también para computadoras de escritorio.

En Mobile Safari, usar funciona de maravilla porque abre el teclado numérico en los campos de entrada que solo deben contener números.

Sin embargo, en Chrome y Safari, el uso de entradas numéricas muestra botones giratorios en el lado derecho del campo, lo que parece una mierda en mi diseño. Realmente no necesito los botones, porque de todos modos son inútiles cuando necesitas escribir algo así como un número de 6 dígitos.

¿Es posible desactivar esto con -webkit-appearance o algún otro truco de CSS? Lo he intentado sin mucha suerte.

El siguiente CSS funciona tanto para Chrome como para Firefox

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

Descubrí que hay una segunda parte de la respuesta a esto.

La primera parte me ayudó, pero todavía tenía un espacio a la derecha de mi entrada type=number . Había puesto a cero el margen en la entrada, pero aparentemente tenía que poner a cero el margen en la ruleta también.

Esto lo solucionó:

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 

No estoy seguro de si esta es la mejor manera de hacerlo, pero esto hace que los spinners desaparezcan en Chrome 8.0.552.5 dev:

 input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } 

Parece imposible evitar que los hilanderos aparezcan en Opera. Como una solución temporal, puede dejar espacio para los hilanderos. Por lo que puedo decir, el siguiente CSS agrega suficiente relleno, solo en Opera:

 noindex:-o-prefocus, input[type=number] { padding-right: 1.2em; } 

También puedes ocultar el spinner con el siguiente truco:

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity:0; pointer-events:none; }