• Categoría de la entrada:Bootstrap / CSS / HTML

Algunas veces necesitamos usar en algún formulario un input del tipo numérico ( type=”number” ) pero no queremos que aparezcan las flechas.

Los navegadores de escritorio WebKit agregan flechas hacia arriba y hacia abajo a las inputs de tipo numérico denominados giradores o spinners.

Puedes desactivarlos visualmente utilizando el siguiente código CSS:

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

Debes tener en cuenta que aunque estos se oculten visualmente, la funcionalidad de aumentar o disminuir el número mediante la rueda de desplazamiento del mouse sigue activa.

Esta entrada tiene 6 comentarios

  1. Néstor

    Hola

    A mi con eso no me ha funcionado, me ha funcionado de esta forma:

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

    Tanto en Firefox como en Chrome.

    Saludos.

    1. Programador -

      Hola Néstor, gracias por tu aporte vamos a probarlo. Saludos

  2. deyvid

    ninguno de esos me funciono ami me funciono con este css, saludos

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

    1. Programador -

      Gracias por tu aporte. Saludos

  3. cristian cordero

    a mi me sirvio solo que tuve que borrar cache luego de ponerlo en css porque no se refleja enseguida

    1. Programador -

      Que bueno que te haya servido. Saludos

Deja una respuesta