Apply different style to the selected item of the asp:DropDownList

Question

I want to style the selected item of the asp:DropDownList, the rest of the item may have default or some other style. Note that here Selected Item means the item which is finally visible after the selection is made.

I have used:

ddlID.Items[0].Attributes.CssStyle.Add("background-color", "yellow");

$("#ddlID option:first").css("background-color", "yellow");

ddlID.SelectedItem.Attributes.CssStyle.Add("background-color", "yellow");

$("#ddlID option:selected").css("background-color", "yellow");

None of the above worked for me the first two style the first item of the list and the last two style the item which is been selected in the list only.

I would prefer CSS to accomplish the task if possible.

Change the background color of dropdownlist element and not the listitem based on selection. — Akash Amin, Jun 23 '16 at 11:16
Looks like a dupe of http://stackoverflow.com/q/8619406/728795 — Andrei, Jun 23 '16 at 11:17
check this link http://stackoverflow.com/questions/5068087/set-background-colour-of-select-to-selected-option-in-jquery — Abdul, Jun 23 '16 at 11:57

score 0 · Answer 1 · answered Jun 23 '16 at 11:37

Try Below snippet:

In CSS

 <style>
        option:checked {
            background-color: yellow;
            color: red;
        }
    </style>

In Aspx page

<asp:DropDownList runat="server">
    <asp:ListItem Text="-- Select --" Value="0"></asp:ListItem>
    <asp:ListItem Text="ListItem1" Value="1"></asp:ListItem>
    <asp:ListItem Text="ListItem2" Value="2"></asp:ListItem>
    <asp:ListItem Text="ListItem3" Value="3"></asp:ListItem>
    <asp:ListItem Text="ListItem4" Value="4"></asp:ListItem>
</asp:DropDownList>

score 0 · Accepted Answer · answered Jun 24 '16 at 05:23

Thanks all you guys for all those important links and hints. Finally, I got the solution so I thought to share it over here. I have just added a class to the asp:DropDownList 'ddlStyle' added all the style to this class which I wanted to be there on the selected item (visible on the top after the selection is made).

.ddlStyle{
   background-color:yellow;
}

and added option to define the other css properties for the list of the items of the asp:DropDownList

.ddlStyle option{
   background-color:whitesmoke;
}

Apply different style to the selected item of the asp:DropDownList

2 Answers2