React-Select 移除焦点边框

Question

我不知道如何在 React select 聚焦时删除边框或轮廓（不确定是哪一个）。

上传图片以供参考。我默认没有边框

customStyle = {      
        control: provided => ({
            ...provided,           
            height: 10,
            width: 300,
            padding: 10,
            margin: 0,
            marginLeft: 0,
            border: "0px solid black",
            fontSize: 13,
            backgroundColor: 'white',
            outline: 'none'            
        })
    }

谢谢

Answer 1

React-select v3

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

这里是live example

React-select v2

要在 Select 聚焦时重置边框，您有两种解决方案：

使用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
    }
})

使用!important（这个有效，但我建议使用第一个解决方案，!important 从来都不是一件好事）

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

不要忘记重置您获得的 boxShadow（蓝色边框）。

这里是live example.

Answer 2

这对我有用：

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

这将确保边框在不活动、悬停或活动时保持不变，但没有蓝框阴影。

Answer 3

这个绝对有效：

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

React-Select 移除焦点边框

React-Select Remove focus border

css

reactjs

react-select

React-select v3

React-select v2