2

Tengo un campo de entrada numérico en un formulario, con la idea no sólo de que se acepten únicamente valores numéricos sino también para que en dispositivos móviles se abra el teclado numérico en lugar del regular:

<input type="number" name="numero" />

Esto funciona correctamente, pero algunos navegadores de escritorio le ponen unos botones para incrementar/decrementar el número en una unidad y otros no. Y eso es algo que quiero evitar.

¿Es posible añadir algún atributo o estilo para que no se muestren esos botones?

3 respuestas 3

19

En los navegadores basados en Webkit podrias utilizar: -webkit-inner-spin-button y -webkit-outer-spin-button para ocultarlos, aunque igual se podrá seguir aumentando el numero a través del scroll del mouse o usando las teclas arriba y abajo.

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

input[type=number] { -moz-appearance:textfield; }
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Spinner</title>
</head>
<body>
<input type="number" />
</body>
</html>

5
  • Esto funciona en Chrome, pero falla en Firefox. ¿Hay algo que se pueda hacer para Firefox?
    – Alvaro Montoro
    Commented el 13 ago. 2016 a las 20:50
  • De acuerdo a este articulo jwatt.org/2013/12/11/input-type-number-coming-to-mozilla, podrias intentar colocando el atributo -moz-appearance:textfield;al input number, input[type=number] { -moz-appearance:textfield; } Commented el 13 ago. 2016 a las 21:23
  • Ahora sí me funcionó y ya no se ven los botones en ningún navegador de los que he probado (IE, Chrome y FF)
    – Alvaro Montoro
    Commented el 13 ago. 2016 a las 21:28
  • funciona bien pero la letra "e" si se puede ingresar :/ es por la reduccion que se hace de algunos numeros grandes o por q?
    – Luis
    Commented el 8 nov. 2017 a las 1:21
  • 3
    Hola @Luis, bienvenido a Stack Overflow en Español. La letra "e" se permite porque es el equivalente a hacer *10 elevado al número que siga la e. Por ejemplo, 2e3 es equivalente a 2 * 10^3 = 2 * 1000 = 2000
    – Alvaro Montoro
    Commented el 8 nov. 2017 a las 1:24
0

A mi me ha funcionado con esto:

input[type="number"]
{
    -webkit-appearance: textfield !important;
    margin: 0;
    -moz-appearance:textfield !important;
}

Tanto en Firefox como en Chrome, de la forma que plantean en la respuesta anterior, no funciona actualmente.

0

Elimino los decoradores de un input type=number agregado el siguiente código en el css:

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.