css - propiedades - ¿Desactivar los botones de giro de webkit en el tipo de entrada="número"?

webkit firefox

Question

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

En Mobile Safari, usar <input type="number"> funciona muy bien porque muestra 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 de giro en el lado derecho del campo, lo que parece una mierda en mi diseño. Realmente no necesito los botones, porque son inútiles cuando necesitas escribir algo como un número de 6 dígitos de todos modos.

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

Answer 1

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

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

Esto lo arregló:

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

También puedes esconder 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;
}