¿Deshabilitar los botones de giro de webkit en input type = "number"?

203

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

En Mobile Safari, el uso <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 giratorios en el lado derecho del campo, que parece una mierda en mi diseño. Realmente no necesito los botones, porque de todos modos son inútiles cuando necesitas escribir algo como un número de 6 dígitos.

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

css html webkit pojo
fuente
15
Si prefiere usarlo type="text"por otros motivos y solo cambió a número para la función de teclado numérico, puede usar pattern="[0-9]*"para obtener la función de teclado, lo que le permite conservar type="text". Ver stackoverflow.com/questions/6171903/…
joshuahedlund

Respuestas:

114

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;
}
Rolwin Crasta
fuente
8
mejor solución que la anterior (más completa)
aqm
-moz-apariencia: campo de texto; Además fue la única respuesta que funcionó para mí. ¡Gracias!
Nanoripper
283

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 type=numberentrada. Había puesto a cero el margen en la entrada, pero aparentemente también tuve que poner a cero el margen en la rueda giratoria.

Esto lo solucionó:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
Bob Spryn
fuente
Increíble. Tuve un problema similar , pero con una estrategia CSS ligeramente diferente, que condujo a problemas completamente nuevos ...
Lukas Eder
1
¿Alguien sabe de una manera de arreglar el comportamiento de desplazamiento donde puede desplazarse hacia arriba y hacia abajo infinitamente? He configurado min=0.01(y maxa algún valor arbitrario) en mi elemento de entrada, pero preferiría que la rueda de desplazamiento solo suba y baje la página. Estoy usando AngularJS y no puedo encontrar nada atm.
JaKXz
2
Vinculación a una fuente autorizada para este problema específico y este tipo de información: css-tricks.com/snippets/css/turn-off-number-input-spinners
Josh Habdas
1
Para ser claros, ¡esto no elimina la funcionalidad de desplazamiento del mouse!
babalu
1
-moz-aparición: campo de texto para Firefox
Kevin Suttle
16

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

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
robertc
fuente
@JethroLarson ¿En qué no funciona? Podrías intentarlo en su -webkit-outer-spin-buttonlugar.
robertc
esto funcionó muy bien para type = "date": input [type = date] :: - webkit-external-spin-button {-webkit-Look: none; }
fea
11

Parece imposible evitar que aparezcan hilanderos en Opera. Como 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;
}
Goulven
fuente
44
@Knu De hecho, pero vale la pena mencionarlo aquí porque el código en la respuesta deja las entradas inutilizables con Opera.
Goulven
44
@Goulvench, por favor no :) Me ha resultado muy útil, alguien más podría hacerlo también.
viernes
-2

También puedes ocultar la ruleta con el siguiente truco:

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