Input [number] arrows out of input area

Question

I have a fairly simple react component:

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

styled with StyledComponents like this:

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

so it looks like this now:

and I would like to make it look like this:

Thanks!

I think this link will provide you some information https://stackoverflow.com/a/45396364/5146848 — Sifat Haque, Jun 06 '19 at 08:27
i guess you can't take that spinners out from input rather you can remove it and add custom spinners outside — Harish, Jun 06 '19 at 08:55

score 1 · Accepted Answer · answered Jun 06 '19 at 11:38

What you can do is hide the default incrementer button and make your own buttons to increment and decrement the value from state.

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

Input [number] arrows out of input area

1 Answers1