下拉 ListItem 背景颜色变化答案

【问题标题】：dropdown ListItem background color change下拉 ListItem 背景颜色变化
【发布时间】：2020-08-16 05:07:15
【问题描述】：

我正在尝试使 DropDown 的背景颜色即使对于 Listitem 也是透明的。

 <asp:Label ID="Label1" runat="server"  Text="Language : " style="color:white;padding:0 2px 0 2px;background-color: transparent !important;" />
                     <asp:DropDownList ID="ddlLanguages" runat="server" AutoPostBack="true" style="color:black;background-color: transparent !important;" >
                         <asp:ListItem style="background-color:transparent" Text="English" Value="en-us" />
                         <asp:ListItem style="background-color:transparent" Text="French" Value="fr" />
                          </asp:DropDownList><span style="color: white;;padding:0 2px 0 2px;"> | </span>

但即使在我的主 CSS 文件中添加 css 也不起作用

select.tt-dropdown-menu {
background-color: transparent !important;
}

select.tt-dropdown-menu .tt-suggestions .tt-suggestion {
cursor: pointer;
border-bottom: 1px solid #000; 
}

不知道为什么它不工作。有什么建议！！

【问题讨论】：

标签： asp.net dropdown

【解决方案1】：

实际上，将背景颜色更改为透明根本没有任何效果。那是因为选择选项容器具有一些属性，这些属性首先由浏览器定义，其次由操作系统定义。这意味着如果您将 ListItem 的背景颜色更改为透明，则容器的颜色为白色，您将无法找到差异。除了透明之外，您可以使用该 js/jquery 脚本更改奇数、偶数元素的颜色：

window.onload = function () {
            $("#<%=ddlLanguages.ClientID%> option:odd").css("background-color", "red");
            $("#<%=ddlLanguages.ClientID%> option:even").css("background-color", "blue");
        }

这可以通过 css 实现，但我认为 jquery 是在 web 表单中实现的更稳定的选择

【讨论】：