如何移除react-select中自定义DropdownIndicator图片的边框（轮廓线）？

安全阿岳

2026-8-6

移除自定义DropdownIndicator图片的边框/轮廓线解决方案

方法1：直接给图片元素添加样式
在CSS中针对.arrow-down-grey类设置移除边框和轮廓：
```
.arrow-down-grey {
  border: none;
  outline: none;
}
```
或者直接使用内联样式：
```
<img className="arrow-down-grey" style={{ border: 'none', outline: 'none' }} />
```

方法2：覆盖react-select组件的DropdownIndicator样式
修改selectTableStyles，针对DropdownIndicator及其内部图片移除focus状态的轮廓和边框：

const selectTableStyles = {
  dropdownIndicator: (base) => ({
    ...base,
    '&:focus': {
      outline: 'none',
    },
    '& img': {
      border: 'none',
      outline: 'none',
    }
  })
};

方法3：替换img标签为div（避免img默认边框问题）
如果箭头是通过背景图实现的，将img换成div可彻底避免浏览器对空src图片的默认边框渲染：
```
const DropdownIndicator = props => (
    <components.DropdownIndicator {...props}>
        <div className="arrow-down-grey" />
    </components.DropdownIndicator>
);
```
确保CSS中给.arrow-down-grey设置了正确的背景图和尺寸。