Html 如何删除输入中输入类型数字中的箭头

当输入被聚焦时，我想移除箭头，但我不能使用css文件.我必须在我的部件上做.

我怎样才能做到这一点呢？是否可以使用Tailwincss？

Tailwind Playground个

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