search

JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.6k stars 4.12k forks source link

React Select [v2] focus outline color #2728

Closed acollazomayer closed 4 years ago

acollazomayer commented 6 years ago

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

Thanks

koofka commented 6 years ago

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

jprosevear commented 6 years ago

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

Clee681 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

.Select {
  &.is-focused {
    box-shadow: 0px 0px 10px #FFEB3B;
  }
}
lakesare commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

this worked for me.

Screen Shot 2563-06-12 at 18 47 30

IlyaVel commented 4 years ago

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

juanektbb commented 3 years ago

I was having an issue with an internal focus: image

I resolved it like this:

control: (base, state) => ({
  ...base,
  "*": {
    boxShadow: "none !important",
  },
}),
cpnvr commented 3 years ago

This is what ended up working for me (it applies secondary style when either mouse is hovering over menu OR when select menu is open -- this may be the use case that others are looking for too so I'm posting here):

control: (provided, state) => ({
      ...provided,
      borderColor: state.isFocused ? colors.orange : colors.blue,
      "&:hover": {
        borderColor: colors.orange,
      },
    }),
krthush commented 3 years ago

like others have chimed in i too had issues with both an internal focus as well as styling the border,

my final code ended up looking like this:

const customStyles = {
    control: (provided: any, state: any) => ({
      ...provided,
      "*": {
        boxShadow: "none !important",
      },
      boxShadow: 'none',
      borderColor: state.isFocused ? '#fcb150' : provided.borderColor,
      '&:hover': {
        borderColor: state.isFocused ? '#fcb150' : provided.borderColor,
      }
    }),
    option: (provided: any, state: any) => ({
      ...provided,
      backgroundColor: state.isSelected ? '#fcb150' : (state.isFocused ? '#ffe57b' : provided.backgroundColor),
      '&:hover': {
        backgroundColor: state.isSelected ? '#fcb150' : '#ffe57b',
      }
    })
 };

which is incredibly overloaded for what I assumed to be simple styling

demo
fngadiyo commented 2 years ago

I don't know why we make it this complicated just to style a component. Why putting default blue input boxShadow in the first place and why can't I change it without "!important" marks? I don't understand. This is my customStyles to get rid of that pesky boxShadow

  const customStyles = {
    control: (styles) => ({
      ...styles,
      boxShadow: 'none !important',
      '*': {
        boxShadow: 'none !important',
      },
    }),
  };
umerfarooq1997 commented 2 years ago

...base, border: 1px solid ${state.isFocused ? '#333' : '#dceaf4'}, borderColor: '#dceaf4', boxShadow: 'none !imoirtant', height: '45px', // This line disable the blue border '&:focus': { border: '1px solid #333 !important', }, '&:active': { borderColor: '#333 !important', }

aashimgarg commented 2 years ago 
 <Select className="styles" />
   .styles {
    input:focus-visible {
      outline : 0px !important;
    }
  }

This one worked for me!

umerfarooq1997 commented 2 years ago

Yeah bro i got it thank you for the help

Regards

[image: Mailtrack] https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11& Sender notified by Mailtrack https://mailtrack.io?utm_source=gmail&utm_medium=signature&utm_campaign=signaturevirality11& 10/05/22, 01:41:40 PM Remove

On Tue, Oct 4, 2022 at 11:33 PM aashim @.***> wrote: