How to Remove Arrows in Input Type 'Number' with Tailwind CSS

If you want to remove the arrows (spinner buttons) from an input field of type number, Tailwind CSS provides an elegant way to achieve this without adding custom CSS files. This can be done using pseudo-classes and the appearance-none utility. Here’s how to do it step by step.

Solution with Tailwind CSS

To disable the spinner arrows, you can use the following utility classes in your className. Tailwind supports pseudo-elements like ::-webkit-inner-spin-button, which can be styled or removed using appearance-none.

Example Code:

import React, { useState } from 'react'

const InputCounter = ({ id, label, value }) => {
  const [count, setCount] = useState(value ?? 0)

  return (
    <div className="flex flex-col gap-2">
      <label htmlFor={id} className="text-sm font-bold text-neutral-700">
        {label}
      </label>

      <div className="flex w-fit items-center rounded border border-neutral-300">
        <button
          type="button"
          className="h-10 w-10 rounded border-r border-gray-300 bg-transparent focus:outline-none"
          onClick={() => setCount(count - 1)}
        >
          -
        </button>

        <input
          id={id}
          type="number"
          value={count}
          onChange={(e) => setCount(Number(e.target.value))}
          className="h-10 w-16 text-center [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
        />

        <button
          type="button"
          className="h-10 w-10 rounded border-l border-neutral-300 bg-transparent focus:outline-none"
          onClick={() => setCount(count + 1)}
        >
          +
        </button>
      </div>
    </div>
  )
}

export default InputCounter

Key Tailwind Utility:

appearance-none: Disables the default browser styling for the element.
[&::-webkit-inner-spin-button]:appearance-none: Targets the spinner buttons inside the input and disables them.
[&::-webkit-outer-spin-button]:appearance-none: Targets the outer spinner buttons (if any).

Alternative Approaches

1. Using `inputmode="numeric`:

Another option is to use the inputmode="numeric" attribute. It changes the input behavior and eliminates the need for spinners in most modern browsers:

<input
  type="text"
  inputmode="numeric"
  placeholder="Enter a number..."
  className="h-10 w-16 rounded border border-gray-300 text-center"
/>

2. Fallback CSS for Legacy Browsers:

For older browsers, you can use basic CSS directly:

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

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Then apply the no-spinners class:

<input type="number" class="no-spinners" placeholder="Enter a number..." />

FAQs

Q1: Can I use Tailwind CSS alone to remove the arrows?

Yes, you can use the appearance-none utility along with pseudo-element classes to achieve this without writing additional CSS files.

Q2: Will this work across all browsers?

The appearance-none utility and pseudo-classes work in modern browsers like Chrome, Edge, and Firefox. However, older browsers like Internet Explorer may not support this.

Q3: What if I want the spinner buttons for accessibility?

If you want to keep the spinner buttons for accessibility purposes, consider using a combination of appearance-none only when necessary and providing other input methods like stepper buttons.