How to style the hover/focused effect?

[lc796]

Hi, I am wondering how to style the Select component's border. Right now it has a blue border when focused, and a thinner white border when hovering. I would like to remove the border entirely, but this does not appear to be working as I thought it might. Further, I couldn't figure out how to style the background color of an option when it is clicked from the multi drop-down menu, it still has the default light blue colour.

Here are my current styles:
const countryStyles = { control: (styles, state) => ({...styles, color: "#C95858", backgroundColor: "#141413", border: "none"}), menu: (styles) => ({...styles, color: "#C95858", backgroundColor: "#141413"}), option: (styles) => ({...styles, color: "#C95858", backgroundColor: "#141413"}), multiValue: (styles) => ({...styles, backgroundColor: "#262523"}), multiValueLabel: (styles) => ({...styles, color: "#fff"}), multiValueRemove: (styles) => ({...styles, color: "#C95858"}) }

Any help would be appreciated! Thank you.

[manjushsh]

Hi @lc796,
You can do something like this:

multiValueRemove: (provided) => {
    return {
      ...provided,
      padding: "5px 10px",
      backgroundColor: "rgba(255, 200, 2, 0.704)",
      textDecoration: "none",
      ":hover": {
        backgroundColor: "red",
        color: "white",
        textDecoration: "line-through"
      },
      borderRadius: "17px"
    };
  }

Example CodeSandbox. See 4th select from top.

Stack Overflow guide
Simiar queastion: #3345