React-select: Change arrow and hide stick

Created on 11 Jul 2019 · 10Comments · Source: JedWatson/react-select

How can I hide a stick(in a blue square)? And Can I change an arrow(in a red square)?

Source

HulioEglesias

Most helpful comment

That's what the dropdownIndicator and indicatorSeparator style props are for:

<Select
  styles={{
    indicatorSeparator: () => {}, // removes the "stick"
    dropdownIndicator: defaultStyles => ({
      ...defaultStyles,
      color: 'purple' // your changes to the arrow
    })
  }}
  {...otherProps}
/>

kkkrist on 11 Jul 2019

👍8

All 10 comments

That's what the dropdownIndicator and indicatorSeparator style props are for:

<Select
  styles={{
    indicatorSeparator: () => {}, // removes the "stick"
    dropdownIndicator: defaultStyles => ({
      ...defaultStyles,
      color: 'purple' // your changes to the arrow
    })
  }}
  {...otherProps}
/>

kkkrist on 11 Jul 2019

👍8

Can I change blue to red?

HulioEglesias on 11 Jul 2019

Well, the default arrow is an svg image. You can hide it via:

<Select
  styles={{
    indicatorSeparator: () => {}, // removes the "stick"
    dropdownIndicator: defaultStyles => ({
      ...defaultStyles,
      '& svg': { display: 'none' }
    })
  }}
  {...otherProps}
/>

and then maybe construct an arrow out of the indicatorContainer-div pseudo-elements like we used to back in the day, like so:

dropdownIndicator: defaultStyles => ({
  ...defaultStyles,
  '& svg': { display: 'none' }
  '&::before': {
    border: '…',
    transform: 'rotate(…)'
  },
  '&::after': {
    border: '…',
    transform: 'rotate(…)'
  }
})

You'll figure it out :-)

kkkrist on 11 Jul 2019

👍2

Is there direct access to the SVG? I'd like to use a completely different SVG icon

andyford on 9 Aug 2019

You can replace the dropdown icon using the components framework. An example of another icon in use and how it is achieved can be found in the documentation or here.

Rall3n on 12 Aug 2019

@Rall3n thanks for that. BTW all the "(Source)" links on that documentation page https://jedwatson.github.io/react-select/ go to 404s

andyford on 12 Aug 2019

😕3

You can refer to https://codesandbox.io/s/react-codesandboxer-example-zl6zg

mwei2018 on 17 Jan 2020

Is it possible to change the position of the dropdownIndicator to the left?

maleja111 on 6 Feb 2020

Is it possible to change the position of the dropdownIndicator to the left?

<Select isRtl="true" />

mksbnt on 7 May 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!