React-Select Remove focus border

React-select v3

const style = {  control: base => ({    ...base,    border: 0,    // This line disable the blue border    boxShadow: 'none'  })};

Here a live example

React-select v2

To reset border when Select is focused you have two solutions:

1. Use the state

   control: (base, state) => ({    ...base,    border: state.isFocused ? 0 : 0,    // This line disable the blue border    boxShadow: state.isFocused ? 0 : 0,    '&:hover': {       border: state.isFocused ? 0 : 0    }})

2. Use !important (this one works but I recommend to use the firstsolution, !important is never a good thing to employ)

   control: base => ({   ...base,   border: '0 !important',   // This line disable the blue border   boxShadow: '0 !important',   '&:hover': {       border: '0 !important'    }})

Don't forgot to reset the boxShadow (blue border) that you get.

Here a live example.

This worked for me:

control: (base, state) => ({    ...base,    border: '1px solid black',    boxShadow: 'none',    '&:hover': {        border: '1px solid black',    }})

This will ensure the border remains when inactive, hovered or active but there is no blue box shadow.

This one is definitely working:

const style = {    control: (base) => ({      ...base,      boxShadow: "none"    })}