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 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.

Leave a Comment