CODEWITHSUNDEEP
javascriptcssreactjsreact-select
Rik Schoonbeek
Rik Schoonbeek

Reputation: 4460

How to change selected react-select input color?

Using react-select (React.js) I notice that when the select field is clicked on it shows a blue-ish color.

I say blue-ish because it seems to let through some of the yellow border I gave to it too, so it may look green.

enter image description here

How do change this color?

I am assuming that I need the right css selector, and that I need the 'control' style key. Is that correct?

I have already managed to style the general border color, and the border color on hover:

const SelectStyle = {
  control: styles => ({
    ...styles,
    border: `1px solid ${Colors.sec6}`,
    "&:hover": {
      borderColor: "red"
    }
  }),
  ...
};

And I thought I could use :focus, or maybe :active to change the color when the color, but that doesn't seem to work. I have tried the following, to no avail:

"&:focus": {
  borderColor: "pink"
},
"&:active": {
  borderColor: "orange"
}

I have checked the list of css selectors at W3schools, but I don't see which of those could be the one that I need.

Upvotes: 2

Views: 8585

Answers (2)

Changyu Huang
Changyu Huang

Reputation: 11

The answer by Rik Schoonbeek is correct on how to remove the blue border.

To further change the color, we have to set boxShadow: "none" first for the control divisor.

Then, add border color to focus-within subclass:

    boxShadow: "none",
    "&:focus-within": {
      borderColor: "#f7c6b9",
      boxShadow: "0 0 0.2rem rgba(233, 105, 71, 0.25)",
    }

This way, the behavior will match that of react-bootstrap text input.

We can add either using the customStyle in js or add a wrapper divisor with a specific className and add it in scss using class_end_with_selector:

.myReactSelectClass {
   [class$='-control'] {
      ...
   }
}

Update: There is a react-select open bug when building prod DoM such that the style is not applied in prod: https://github.com/JedWatson/react-select/issues/3309

So to avoid it, add a classNamePrefix="react-select" (could be any preferred string) to enforce the classNames in prod DoM And the using the following classNames (use react-select Prefix as an example)

  .react-select__value-container {...}
  .react-select__indicators {...}
  .react-select__input {...}
  .react-select__control {...}

Upvotes: 1

Rik Schoonbeek
Rik Schoonbeek

Reputation: 4460

Found the answer on the react-select GitHub page.

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

so, this did it for me: boxShadow: "none"

source: https://github.com/JedWatson/react-select/issues/2728

Upvotes: 2

Related Questions