React-select: How do i highlight selected item in dropdown

Created on 30 Sep 2016 · 5Comments · Source: JedWatson/react-select

I want to apply a css class to the current selected item when the dropdown is open. Something like the following.

capture

As you can see the current selected item is highlighted in red when the dropdown is opened. This is done by passing the className to the option that is currently selected as follows:-

const options = data.map((item) => {
    let className = item.isDefault ?
        'highlight-selected-item ' :
        '';

    return {
        label: item.profileName,
        value: item.profileName,
        className
    };
});

I think it would be great if the Select component can take a prop like optionSelectedClassName so that we don't have to manually see which item is selected and add a className to that.

Source

amit1911

Most helpful comment

This will work.

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

harsimarriar96 on 2 Oct 2018

👍3

All 5 comments

I found a simpler way of doing this by going through the codes. The 'is-selected' class is added to the item that is currently selected. So just adding the following worked for me.

.Select-option.is-selected {
    color: red;
}

I guess this needs to be added to the documentation. BTW I noticed that some other props have also not been added to the documentation.

amit1911 on 30 Sep 2016

I too wanted to change the color of the selected menu option. The adjoining .is-selected amit1911 mentions doesn't work with the current version, however .is-focused did:

.Select-option.is-focused { background-color: rgba(1, 198, 136, 0.15) !important; }
** only after adding the dreaded !important

chloerice on 9 Sep 2017

👍1

This will work.

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

harsimarriar96 on 2 Oct 2018

👍3

This will work.

const CustomStyle = {
  option: (base, state) => ({
    ...base,
    backgroundColor: state.isSelected ? {Color1} : {Color2},
    ':active': {
      backgroundColor: state.isSelected ? {Color3} : {Color4}
    }
  })
}
<Select styles={customStyle} >

':active': { backgroundColor: 'hotpink' } This should be mentioned in the docs.

jackblackCH on 7 Aug 2019

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!