css React-Select移除焦点边框

pw136qt2  于 2022-11-19  发布在  React
关注(0)|答案(5)|浏览(204)

我不知道如何删除边框或轮廓(不确定是哪一个)从React选择,当它的重点。
上传图片供参考。我默认没有边框。

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

谢谢

fjnneemd

fjnneemd1#

React选择v3

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

此处为live example

React选择v2

要在Select聚焦时重置边框,有两种解决方案:
1.使用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
    }
})

1.使用!important(这一个工作,但我建议使用第一个解决方案,!important从来不是一个好东西雇用)

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

不要忘记重置您得到的boxShadow(蓝色边框)。
这里是live example

xiozqbni

xiozqbni2#

这对我很有效:

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

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

nqwrtyyt

nqwrtyyt3#

这一个肯定是工作:

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

ars1skjm4#

我试过很多次了!最后这一次对我起作用了。

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

}),

kgsdhlau

kgsdhlau5#

这会移除方块阴影的厚度,并移除边界的蓝色。

const controlStyle = base => ({
    ...base, 
    boxShadow: "none", 
    borderColor: "#cccccc",
    "&:hover": {
        borderColor: "#cccccc"
    }
})

相关问题