Javascript 输入区外的输入[编号]箭头

我有一个相当简单的组件：

<Quantity type="number" value="1"></Quantity>

现在看起来是这样的：

我想让它看起来像这样：

const Quantity = styled.input`
border: 1px solid #000;
border-radius: 2px;
width: 48px;
height: 28px;
font-size: 18px;
text-align: center;
margin-right: 10px
`;

---

谢谢

您可以做的是隐藏默认的递增按钮，并制作自己的按钮，从状态递增或递减值

const Quantity = styled.input`
   border: 1px solid #000;
   border-radius: 2px;
   width: 48px;
   height: 28px;
   font-size: 18px;
   text-align: center;
   margin-right: 10px

   //hide the default button
   &::-webkit-appearance: textfield;
   &::-moz-appearance: textfield;
   appearance: textfield;

   &::-webkit-inner-spin-button, 
   &::-webkit-outer-spin-button 
   &::-webkit-appearance: none;

`;

const Incrementer = styled.button`
   ...
`;
const Decrementer = styled.button`
   ...
`;
...

const [inputValue, setInputValue] = useState(0);

...

<Incrementer onClick={() => setInputValue(inputValue + 1)} />
<Quantity value={inputValue}/>
<Decrementer onClick={() => setInputValue(inputValue - 1)} />

const Quantity=styled.input`
边框：1px实心#000；
边界半径：2px；
宽度：48px；
高度：28px；
字号：18px；
文本对齐：居中；
右边距：10px
//隐藏默认按钮
&：-webkit外观：textfield；
&：-moz外观：textfield；
外观：textfield；
&：-webkit内部旋转按钮，
&：-webkit外部旋转按钮
&：-webkit外观：无；
`;
const Incrementer=styled.button`
...
`;
常数递减器=styled.button`
...
`;
...
常量[inputValue，setInputValue]=useState（0）；
...
setInputValue（inputValue+1）}/>
setInputValue（inputValue-1）}/>

我认为此链接将为您提供一些信息，我想您不能从输入中删除微调器，而是可以将其删除并在外部添加自定义微调器