javascript - How do I implement overflow-hidden in react-bootstrap?

Question

I hope my <Form.Control/> won't be effect when user scroll up or down, because if the input value is a number, scroll up/down will effect the value, I want to avoid it

this is so far I've tried

    <Form.Control
                    type="number"
                    className = "overflow-hidden" 
    <Form.Control/>

Answer 1

You can disable the scroll up and down buttons by adding this CSS style

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}