dropdown ListItem background color change

Question

I am trying to make background color of by DropDown as transparent even for 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>

but it does not work even added css in my main CSS file still not work

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

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

not sure why not its working. Any Suggestions !!

Answer 1

Actually, changing the background color to transparent doesn't have any effect at all. That because the select option container has some attributes that are defined by the browser in the first place and the operating system secondly. This means if you change the background color of the ListItem to transparent, the container's color is white and you won't be able to find the difference. Except transparent, you can change the color of the odd, even elements, by using that js/jquery script:

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

Which can be achieved by css, but I see jquery a more stable choice for implementation in web forms