我想删除箭头时,输入的重点,但我不能使用CSS文件。我必须做我的组件。
我如何才能做到这一点?TailwindCSS可以吗?
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>
);
};
1条答案
按热度按时间xj3cbfub1#
将
[&::-webkit-inner-spin-button]
属性与appearance-none
实用程序配合使用。正如您所看到的here,
-webkit-inner-spin-button
定义了您想要禁用的箭头:::-webkit-inner-spin-button CSS伪元素用于设置数字选择器输入元素的微调按钮的内部样式。
以下作品:
使用您的代码:
Tailwind-play