How to change DropDownList selected item color in asp.net

asp.net dropdownlist selected item color

The following asp.net c# example code demonstrate us how can we apply different text color and background color of DropDownList current selected item. DropDownList is a single selection mode list control. So we can select a single item at a time from DropDownList server control.

Sometimes web users want to change their selection of DropDownList control. So if they clearly identified their last selected item then it will be better web design. To do this, we change the current selected item's text and background color programmatically at run time.

We change the DropDownList current selected item's text and background color by attaching CSS style to the specified ListItem object. ListItem object's Attributes.Add() method allow us to add any valid CSS style to the specified ListItem object. The bottom images will help you more to understand the example code.

dropdownlist-selected-item-color.aspx


<%@ Page Language="C#" AutoEventWireup="true"%>  
    
<!DOCTYPE html>
      
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    { 
        if(!Page.IsPostBack)
        {
            string[] birds = { 
                                 "Chukar Partridge",
                                 "Cape Spurfowl",
                                 "Grey Partridge",
                                 "Jungle Bush Quail",
                                 "Common Quail",
                                 "Crested Partridge"
                             };

            DropDownList1.DataSource = birds;
            DropDownList1.DataBind();
        }
        
    }
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int index= DropDownList1.SelectedIndex;
        DropDownList1.Items[index].Attributes.Add("style", "color:orangered;background-color:wheat;");

        Label1.Text = "you selected....<br />";
        Label1.Text += DropDownList1.SelectedItem.Text;
    }
</script>      
      
<html xmlns="http://www.w3.org/1999/xhtml">      
<head id="Head1" runat="server">      
    <title>asp.net dropdownlist selected item color</title>
</head>      
<body>      
    <form id="form1" runat="server">      
    <div>      
        <h2 style="color:MidnightBlue; font-style:italic;">      
            asp.net example - dropdownlist selected item color
        </h2>      
        <hr width="550" align="left" color="Gainsboro" />      
        <asp:Label       
            ID="Label1"       
            runat="server"      
            Text="select an item from dropdownlist."
            Font-Size="X-Large"
            Width="350"
            >      
        </asp:Label>      
        <br /><br />
        <asp:DropDownList
            ID="DropDownList1"
            runat="server"
            AutoPostBack="true"
            Width="350"
            Font-Size="X-Large"
            OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
            >
        </asp:DropDownList>
    </div>      
    </form>      
</body>      
</html>

More asp.net examples