論壇里的所有解決方法都試過了，還是不行。我正在使用 React 中的樣式組件創建一個組合框。
上框。
問題是 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、webkits 等，但仍然沒有結果。請如果有人愿意提供幫助。謝謝
在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);
}
uj5u.com熱心網友回復：
一個旁注：我發現閱讀 StyledComponents 非常困難，我盡量避免使用它們。
有2件事。VisibleLabel不應該是<a>-tag，而是label. 您希望它選擇選擇框，而不是鏈接到其他東西。
你看過這篇短文嗎？https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ 這可能會為您指明正確的方向。
另一種可能性是 chome 插件引起的麻煩。
uj5u.com熱心網友回復：
您是否嘗試添加css檔案？因為您styled-components進行local更改，而不是global。嘗試將其添加為全域
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/478062.html