How to remove arrows in input type "number" inside the input?

Question

I'd like to remove the arrows when input is focused but I can't use a CSS file. I have to do it on my component.

How can I achieve that ? Is it possible with TailwindCSS ?

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

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

      <div>
        <button
          type="button"
          className="hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-r focus:hk-outline-none"
          onClick={() => setCount(count - 1)}
        >
          <IconLess width={16} height={16} />
        </button>

        <input
          id={id}
          type="number"
          value={count}
          className="hk-h-10 hk-w-16 hk-text-center hk-text-base hk-border-none hk-rounded focus:hk-outline-none hk-appearance-none"
        />

        <button
          type="button"
          className="hk-h-10 hk-w-10 hk-bg-transparent hk-rounded hk-rounded-l focus:hk-outline-none"
          onClick={() => setCount(count + 1)}
        >
          <IconPlus width={16} height={16} />
        </button>
      </div>
    </div>
  );
};

Does this answer your question? https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box — Ar Rakin, Mar 29 '23 at 15:47
no since the CSS is in CSS. I need it to be in my className or an attribute on the input — Johan, Mar 29 '23 at 15:48
Then I guess there isn't any way to do that *only* with utility classes provided by tailwind. You'll need to use custom CSS styles. — Ar Rakin, Mar 29 '23 at 15:52
I can add classes or style attribute, but i cant create a css file to add CSS inside it — Johan, Mar 29 '23 at 15:53

score 1 · Accepted Answer · answered Mar 29 '23 at 18:51

Use the [&::-webkit-inner-spin-button] attribute with the appearance-none utility.

As you can see here, the -webkit-inner-spin-button defines those arrows you want to disable:

The ::-webkit-inner-spin-button CSS pseudo-element is used to style the inner part of the spinner button of number picker input elements.

The following works:

<input id="{id}" type="number" value="0" class="[&::-webkit-inner-spin-button]:appearance-none" />

With your code:

<div class="flex items-center border border-neutral-300 w-fit rounded m-8 ">
  <button type="button" class="h-10 w-10 rounded border-r border-gray-300 bg-transparent focus:outline-none">-</button>

  <input id="{id}" type="number" value="0" class="h-10 w-16 text-center  [&::-webkit-inner-spin-button]:appearance-none" />

  <button type="button" class="h-10 w-10 rounded border-l border-neutral-300 bg-transparent focus:outline-none">+</button>
</div>

Tailwind-play

How to remove arrows in input type "number" inside the input?

1 Answers1