Hide spin buttons in the react-select component

Question

I am using react-select component in my project. When I test on the Windows/Chrome browser, spin buttons show up.

I did some research and added the following styles to the root css of my app but it didn't work either.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

How can I hide the spin buttons?

Answer 1

I think you can simply add this line to the component. components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}

Answer 2

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none; /* Safari */
    -ms-appearance: none; /* IE 10 and IE 11 */
    -moz-appearance: none; 
    appearance: none; /* Standard syntax */
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}