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:
-
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 } })
-
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.