javascriptreactjsreact-selectreact-select-search

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


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?


Solution

  • 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