How to get rid of or remove spinners/arrows in react-select?

Question

I am using from react-select but I am not able to remove spinners/arrows from the dropdown.

I am able to remove the default separator | and Dropdown Indicator using

<Select
  components={{
    IndicatorSeparator: () => null, DropdownIndicator: () => null
  }}
  {...}
/>

But how can I get rid of these arrows?

Answer 1

I believe you're setting the type=number for the input element somewhere. In order to remove the up/down arrow. you can use the css code from this tutorial.

You can also see all of the input types and how it's rendered out-of-the-box here.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Live Demo