Issue
i cant figure out how do i remove border or outline ( not sure which one it is ) from react select, when its focused.
Uploaded image for reference. I have no border by default.
customStyle = {
control: provided => ({
...provided,
height: 10,
width: 300,
padding: 10,
margin: 0,
marginLeft: 0,
border: "0px solid black",
fontSize: 13,
backgroundColor: 'white',
outline: 'none'
})
}
Thanks
Solution
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.
Answered By - Laura
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.