React-select: React Select [v2] focus outline color

[acollazomayer]

Hi i want to change the focus outline color, how can i do this

Thanks

[koofka]

There is a built in css class you can use to update the styles on focus. .styled__control-is-focused.

[jprosevear]

Or base the styling in as a prop, see the upgrade guide.

[Clee681]

Per the last comment, this worked for me:

const customStyles = {
  control: (base, state) => ({
    ...base,
    boxShadow: "none"
    // You can also use state.isFocused to conditionally style based on the focus state
  })
};

function SelectWrapped(props) {
  return (
    <Select styles={customStyles} />
  );
}

[Iulia-Soimaru]

Is there a way to change the borderColor on focus? Right now it is blue, but I would like to change it to something from my themes, as well as update color on error.
I found that the style is applied here, maybe there is a way to override it in StyledComponents.

I tried:

<Select
    styles={{
        ...styles,
        control: (base, state) => ({
            ...base,
            borderColor: 'orange',
        }),
    }}
/>

[sergiulucaci]

@Iulia-Soimaru you can style the borderColor via props like:

<Select
    styles={{
        ...styles,
        control: (base, state) => ({
            ...base,
            '&:hover': { borderColor: 'gray' }, // border style on hover
            border: '1px solid lightgray', // default border color
            boxShadow: 'none', // no box-shadow
        }),
    }}
/>

[Iulia-Soimaru]

I ended up doing this (boxShadow was the styling that needed to be changed)

<Select
    styles={{
        ...styles,
        control: base => ({
            ...base,
            boxShadow: `0 0 0 1px 'orange'`,
        }),
    }}
/>

[attilavago]

This is ridiculous. You need to be a rocket scientist to style a bloody component...
I had to resort to doing this:
div[class*="myComboBox"] > div[class*="my_select__control--is-focused"] { boxShadow: 0 !important; outline-color: blue !important; outline-style: auto !important; outline-width: 5px !important; }

[reggieofarrell]

You can also access the state of the Select component and style based on that. I do agree that it's a bit messy. This is how I did it...

const brandColor = '#46beed';

const customStyles = {
  control: (base, state) => ({
    ...base,
    boxShadow: state.isFocused ? 0 : 0,
    borderColor: state.isFocused
      ? brandColor
      : base.borderColor,
    '&:hover': {
      borderColor: state.isFocused
        ? brandColor
        : base.borderColor,
    }
  })
};

then when you render the Select component...

<Select styles={customStyles} />

[MrJadaml]

outline is the standard css attribute you would use to modify the focus state outline (for accessibility and the like).

It does not help that attributes like that are defined in the source with the use of !important which is a bad practice and causes headaches for anyone wishing to modify that attribute.

https://github.com/JedWatson/react-select/blob/master/src/components/Control.js#L46

Sadly you will want to probably fight fire with fire, as last styles win. So using !important yourself -- though maybe add a comment to the link above so your fellow teammates don't totally hate you 😜 and at least understand why that is being included.

[kimfucious]

I'm using a custom css, and I just want to apply the same styles on the ReactSelect input using a classname, like .custom-control-input. Is there an easy way to do that?

[Rall3n]

@kimfucious your query does not contribute to this issue. Please ask questions over at StackOverflow (as per maintainers request in the issue template) or if you have a problem create another issue.

But I think taking a look into the styles documentation should solve your request.

[kimfucious]

Thanks @Rall3n , you're a ⭐️ !

I think one of the reasons people, including myself, have commented here (despite obviously breaking the contribution/issue rules), is because it's like the top hit when gGoogling "how to style react select control border", and the docs are frankly kinda hard to read for most mere mortals, or at least mentally diminished ones, such as myself.

Regardless, I gave up on attempting to use className(s), as it became overly complex.

Working from @reggieofarrell 's excellent example, I found it easier to directly style the component with custom styles like this.

 const customStyles = {
    option: (styles, state) => ({
      ...styles,
      color: state.isSelected ? "#FFF" : styles.color,
      backgroundColor: state.isSelected ? "#F3969A" : styles.color,
      borderBottom: "1px solid rgba(0, 0, 0, 0.125)",
      "&:hover": {
        color: "#FFF",
        backgroundColor: "#F3969A"
      }
    }),
    control: (styles, state) => ({
      ...styles,
      boxShadow: state.isFocused ? "0 0 0 0.2rem rgba(120, 194, 173, 0.25)" : 0,
      borderColor: state.isFocused ? "#D0EAE2" : "#CED4DA",
      "&:hover": {
        borderColor: state.isFocused ? "#D0EAE2" : "#CED4DA"
      }
    })
  };

[mlongman]

This was the easiest solution I found, especially if your application is themed.

.Select {
  &.is-focused {
    box-shadow: 0px 0px 10px #FFEB3B;
  }
}

[lakesare]

If you use classNamePrefix="hi", then you'll be able to use proper classNames (otherwise react-select won't add these classes at all):
.hi__control--menu-is-open { border-color: red; }.

[bladey]

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!

[warapolj]

this worked for me.

[IlyaVel]

Yeah, for me too.
Thank you for the solution!