React-Select Remove focus border

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.

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 first solution, !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 one is definitely working:

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

I have tried a lot! and finally This one worked for me.

control: (provided) => ({
...provided,
border: 0,
outline: '1px solid white',

}),