React-select: On Select Faint Blue Outline (CSS Issue)

Created on 14 Oct 2017 · 8Comments · Source: JedWatson/react-select

After an input is selected a faint blue 2px (estimated) outline appears around the input box.
It is there on all the examples. (You have to select an input first and then it goes away on click)

The only two css properties I thought could be causing this are outline / border so I've tried the following in CSS but to no avail.

*
  outline: none !important
  border: none !important

Does anyone now how to get rid of this faint light blue background.
Thanks

Source

jamesfriedal

👍5

Most helpful comment

<Select 
  style={{
    boxShadow: 'none'
  }}
/>

works

dsvgit on 4 Feb 2018

👍10 😕5 🎉3 👎3

All 8 comments

I believe what you're seeing is the style defined here. You can override it with the selector .Select.is-focused:not(.is-open) > .Select-control, for example.

nikklassen on 23 Oct 2017

👍1

Same here. Even tried

* {
  outline: 0 !important;
  border: 0 !important;
}

* {
  outline: none !important;
  border: none !important;
}

but neither works.

See the screenshot below:

Hongbo-Miao on 23 Oct 2017

<Select 
  style={{
    boxShadow: 'none'
  }}
/>

works

dsvgit on 4 Feb 2018

👍10 😕5 🎉3 👎3

Jeez, thank you so much @dsvgit this was driving me insane. Do you know of any way to do this within a CSS file? The below doesn't work.

```
.Select {
box-shadow: none;
}

taykcrane on 5 May 2018

I dont understand why would you create a library that you have hard time to style? Isnt this react-select is supposed to help you style html options?

wickedsouls on 23 Jun 2018

👍5 👎3

Do the job

.Select-control {
       border: 1px solid red !important
       box-shadow: none !important;
}

MoOo121212 on 26 Jun 2018

👍5 👎3

I struggled with this myself. I customized the box-shadow around my control, so setting it to 'none' did not work for me. I fixed this by adding a custom :hover style to the control:

customStyles = { control: (provided) => ({ ...provided, '&:hover': { borderColor: 'red', }, }) }

boslott on 22 Dec 2018

👍2

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!