Solvedreact select React Select [v2] focus outline color

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

Thanks

21 Answers

✔️Accepted Answer

@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
        }),
    }}
/>

Other Answers:

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} />
  );
}

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; }

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} />

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"
      }
    })
  };