React-Select 删除焦点边框

Question

我不知道如何在聚焦时从反应选择中删除边框或轮廓（不确定是哪一个）。

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

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

反应选择v3

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

这里有一个实例

反应选择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
       }
   })
   

2. 使用

   !important

   （这个有效，但我建议使用第一个 解决方案，

   !important

   从来都不是一个好东西）

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

不要忘记重置您得到的

boxShadow

（蓝色边框）。

这里有一个实例。

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"
    })
}

Answer 4

对于任何使用

react-select

和

@tailwindcss/forms

的人来说，输入上可怕的蓝线（又名框阴影）是由表单插件引入的。 您需要将

strategy: class

传递给

tailwind.config.js

文件中的表单插件。

plugins: [
  ...
  require('@tailwindcss/forms')({
    strategy: 'class',
  }),
]

更多相关信息：https://github.com/tailwindlabs/tailwindcss-forms#using-only-global-styles-or-only-classes

类似问题：https://stackoverflow.com/a/75541836/5712125

Answer 5

我已经尝试了很多！最后这个对我有用。

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

}），

Answer 6

这会消除框阴影的厚度，并消除边框中的蓝色。

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

Answer 7

天上的主我们需要：

import AsyncSelect from "react-select/async";

<AsyncSelect
  onChange={(v) => {
    props.onChange(v);
  }}
  
  {/* ... */}
  
  styles={{
    control: (base, state) => ({
      ...base,
      "*": {
        boxShadow: "none !important",
      },
    })
  }}
/>

Answer 8

Akshay Kumar 的遮阳篷对我有用的另一种方法：

input[id^="react-select-"] {
  @apply focus:outline-none focus:border-transparent focus:ring-0;
}

Answer 9

您可能想要更改颜色，而不是删除它，这就是您可能会如何处理此 V3 ReactSelect

      styles = {{
        control: (baseStyles, state) => ({
          ...baseStyles,
          borderColor: state.isFocused ? 'limegreen' : 'red',
          boxShadow: state.isFocused ? '0 0 0px 4px rgba(255, 0, 0, 1)' : 'none',
          '&:hover': {
            borderColor: 'limegreen'
          }
        }),
      }}