4

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

The updown arrows marked in red

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?

Aniruddha Shevle
  • 4,602
  • 4
  • 22
  • 36
Rohit Sharma
  • 43
  • 1
  • 1
  • 5

1 Answers1

5

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

Edit 64341537/how-to-get-rid-of-or-remove-spinners-arrows-in-react-select

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • Hi I am using react-select npm package and not sure how to apply this or override internal styles of Select dropdown. – Rohit Sharma Oct 14 '20 at 10:37
  • 1
    @RohitSharma I'm not sure how you created the project but if you are using create-react-app, you can just create a css file and import it. I just added the live demo for you – NearHuscarl Oct 14 '20 at 10:52
  • Thanks a lot for the live example. This solved my issue. – Rohit Sharma Oct 14 '20 at 11:20