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