在chrome around anchor 中出现黄色背景颜色，尝试了所有可用的解决方案，但仍然没有解决

Question

论坛上的所有解决办法都试过了，还是没有解决。我正在 React 中使用 styled-component 创建一个组合框。

上方框。

问题是chrome添加了自己的背景颜色。

代码：

<Wrapper>
          
          <SelectWrapper>
      
             <VisibleLabel>Year</VisibleLabel>
       
            <Select
                onChange={(e) => {
                  onSelectChange(e);
                }}
            >
                {years.map((y) => (
                  <Option key={y.value} value={y.value}>
                    {y.year}
                  </Option>
                ))}
              </Select>
            <ChevronIcon
              id="chevron-down"
              size={24}
              strokeWidth={1.5}
            />
          </SelectWrapper>
        </Wrapper>

样式组件：

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: -30px;
  background: ${COLORS.gray[100]};
  width: 150px;
  margin-left: 200px;
  margin-top: -50px;
  
`;

const SelectWrapper = styled.div`
  position: relative;
  isolation: isolate;
`;
const VisibleLabel = styled.a`
  position: absolute;
  top: 5px;
  right: 110px;
  bottom: 10;
  margin: auto;
  text-decoration: none;
  width: 24px;
  height: 24px;
  z-index: 2;
  color: black;
  font-size: 0.8rem;
  filter: none;
  background-color: transparent !important;
`;


const Select = styled.select`
  position: relative;
  appearance: none;
  filter: none;
  width: 150px;
  font-size: 1.5rem;
  padding: 20px 0px 0px 12px;
  border: none;
  outline: none;
  color: black;
  autocomplete: off;
  background: transparent;
  z-index: 4;
  

  & > :focus {
    outline: 0;
    outline-color: transparent;
    outline-style: none;
  }
`;

我尝试添加 !important、webkit 等，但仍然没有结果。请如果有人愿意提供帮助。谢谢

在chrome，来源是：

<gistnote class="gistnote-highlight" highlightid="6573e94f-c486-43c1-bef0-541b6045843d" colornum="3" style="background-color: rgb(255, 251, 120);" id="6573e94f-c486-43c1-bef0-541b6045843d">Year</gistnote>

CSS:
element.style{
   background-color: rgb(255, 251, 120);
}

Answer 1

您是否尝试在 css 文件中添加？因为您的 styled-components 进行了 local 更改，而不是 global。尝试将其添加为全局

Answer 2

旁注：我发现 StyledComponents 很难阅读，我尽量避免使用它们。

有两件事。 VisibleLabel 不应该是 <a> 标签，而是 label。您希望它 select 选择框，而不是 link 其他东西。

你看过这篇短文吗？ https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ 这可能会为您指明正确的方向。

另一种可能是 chome 插件导致了问题。

在chrome around anchor 中出现黄色背景颜色，尝试了所有可用的解决方案，但仍然没有解决

Getting yellow background-color in chrome around anchor, tried all the solution available, but still no fix

html

css

google-chrome

reactjs

styled-components