Cómo ocultar flechas en inputs numéricos

Los inputs de tipo number en HTML incluyen por defecto unas flechas laterales (spinners) que permiten incrementar o decrementar el valor. Sin embargo, en muchas ocasiones estos controles no encajan con el diseño de nuestra aplicación y preferimos ocultarlos para mantener una interfaz más limpia y minimalista.

En esta guía aprenderás dos métodos para eliminar estas flechas: usando CSS puro y usando Tailwind CSS.

El problema de las flechas en inputs numéricos

Cuando creas un input de tipo número:

<input type="number" />

Los navegadores automáticamente agregan controles de incremento/decremento (las flechitas) en el lado derecho del campo. Aunque estas pueden ser útiles en algunos casos, a menudo:

• Rompen el diseño visual de tu formulario
• Ocupan espacio innecesario
• No se alinean con el estilo de tu aplicación
• Pueden resultar confusas en dispositivos móviles

Por eso, muchos desarrolladores prefieren ocultarlas y dejar que los usuarios ingresen los números manualmente.

Método 1: Usando CSS Puro

La forma tradicional de ocultar las flechas es mediante CSS, utilizando pseudo-elementos específicos para cada navegador.

Código CSS completo

/* Ocultar flechas en Chrome, Safari, Edge y Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Ocultar flechas en Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

¿Qué hace cada parte del código?

Para navegadores basados en WebKit (Chrome, Safari, Edge, Opera):

• ::-webkit-inner-spin-button - Apunta a la flecha interior del control
• ::-webkit-outer-spin-button - Apunta a la flecha exterior del control
• -webkit-appearance: none - Elimina la apariencia predeterminada
• margin: 0 - Elimina cualquier espacio residual

Para Firefox:

• -moz-appearance: textfield - Hace que el input numérico se vea como un campo de texto normal, eliminando las flechas

Implementación en tu proyecto

Puedes agregar estos estilos en tu archivo CSS global:

/* Ocultar flechas en todos los inputs numéricos */
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;
}

O aplicarlos a una clase específica:

/* Crear una clase reutilizable */
.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-arrows {
  -moz-appearance: textfield;
}

<input type="number" class="no-arrows" />

Método 2: Usando Tailwind CSS

Si estás utilizando Tailwind CSS en tu proyecto, puedes lograr el mismo resultado usando las clases arbitrarias de Tailwind. Esta es una solución más moderna y que no requiere escribir CSS adicional.

Clases de Tailwind necesarias

<input
  type="number"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>

Desglose de las clases

Tailwind CSS permite usar valores arbitrarios con la sintaxis de corchetes []. Veamos cada clase:

1. [appearance:textfield]

   • Aplica appearance: textfield al input
   • Funciona para Firefox y navegadores modernos
   • Elimina la apariencia de input numérico

2. [&::-webkit-outer-spin-button]:appearance-none

   • Apunta al pseudo-elemento ::-webkit-outer-spin-button
   • Aplica appearance: none para ocultarlo
   • Funciona en Chrome, Safari, Edge y Opera

3. [&::-webkit-inner-spin-button]:appearance-none

   • Apunta al pseudo-elemento ::-webkit-inner-spin-button
   • Aplica appearance: none para ocultarlo
   • Funciona en Chrome, Safari, Edge y Opera

Ejemplo completo con Tailwind

<div class="max-w-md mx-auto p-6">
  <label for="price" class="block text-sm font-medium text-gray-700 mb-2">
    Precio
  </label>
  <input
    type="number"
    id="price"
    placeholder="0.00"
    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
  />
</div>

Consideraciones importantes

Accesibilidad

Al ocultar las flechas, asegúrate de que los usuarios aún puedan:

• Ingresar números mediante el teclado
• Usar las teclas de flecha arriba/abajo para incrementar/decrementar
• Validar correctamente el input (min, max, step)

<input
  type="number"
  min="0"
  max="100"
  step="1"
  class="no-spinners"
  aria-label="Ingrese un número entre 0 y 100"
/>

Funcionalidad del teclado

Aunque ocultes las flechas visuales, los usuarios aún pueden:

• Presionar ↑ para incrementar el valor
• Presionar ↓ para decrementar el valor
• Usar Page Up y Page Down para cambios mayores

Validación

El input sigue siendo de tipo number, por lo que:

• Solo acepta valores numéricos
• Puedes usar atributos min, max y step
• La validación HTML5 sigue funcionando

<input
  type="number"
  min="1"
  max="10"
  step="0.5"
  class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
/>

Alternativa: Usar input type="text"

Si no necesitas la validación automática de números, puedes considerar usar type="text" con validación personalizada en JavaScript:

<input
  type="text"
  pattern="[0-9]*"
  inputmode="numeric"
  class="w-full px-4 py-2 border rounded-lg"
/>

Ventajas:

• No hay flechas que ocultar
• Mayor control sobre el formato
• Puedes agregar máscaras de entrada personalizadas

Desventajas:

• Pierdes la validación HTML5 automática
• Necesitas JavaScript para validar
• En móviles, inputmode="numeric" muestra el teclado numérico

Conclusión

Ocultar las flechas en inputs numéricos es una práctica común en el desarrollo web moderno. Ambos métodos (CSS puro y Tailwind CSS) son válidos y efectivos:

• Usa CSS puro si prefieres tener un archivo CSS centralizado y más legible
• Usa Tailwind CSS si trabajas con una arquitectura utility-first y quieres mantener los estilos junto al HTML

Lo importante es mantener la accesibilidad y la funcionalidad del input, asegurándote de que los usuarios puedan interactuar con el campo de forma intuitiva, incluso sin las flechas visibles.