How to change DropDownList alternate item color in asp.net

DropDownList alternate item text and background color

DropDownList is an asp.net list web server control that allow the users to select a single item from a drop-down-list. DropDownList contains ListItem objects. DropDownList items display vertically. each items display in a separate row. so it is better user friendly design to apply alternate row background color for DropDownList items. the following asp.net c# example code demonstrate us how can we generate alternate item text and background color in DropDownList.

DropDownList server control have no built in property to apply alternate item text color and background color. to apply different color for alternate items in DropDownList control, we loop through the DropDownList items collection. in the iteration process we attach a css class to DropDownList's odd items and another css class to even items (alternate items). we attached css style to ListItem objects using its Attributes property Add() method as ListItem.Attributes.Add().

dropdownlist-alternate-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 = { 
                                 "Montezuma Quail",
                                 "Spruce Grouse",
                                 "Hazel Grouse",
                                 "Western Capercaillie",
                                 "Himalayan Snowcock",
                                 "Rock Ptarmigan"
                             };

            DropDownList1.DataSource = birds;
            DropDownList1.DataBind();
        }
        for (int i = 0; i < DropDownList1.Items.Count;i++)
        {
            if (i % 2 == 0)
            {
                DropDownList1.Items[i].Attributes.Add("class", "even");
            }
            else
            {
                DropDownList1.Items[i].Attributes.Add("class", "odd");
            }
        }
    }
</script>      
      
<html xmlns="http://www.w3.org/1999/xhtml">      
<head id="Head1" runat="server">      
    <title>asp.net dropdownlist alternate item color</title>
    <style type="text/css">
        .even {
            color:darkred;
            background-color:orange;
        }
        .odd {
            color:snow;
            background-color:skyblue;
        }
    </style>
</head>      
<body>      
    <form id="form1" runat="server">      
    <div>      
        <h2 style="color:MidnightBlue; font-style:italic;">      
            asp.net example - dropdownlist alternate item color
        </h2>      
        <hr width="550" align="left" color="Gainsboro" />      
        <br /><br />
        <asp:DropDownList
            ID="DropDownList1"
            runat="server"
            AutoPostBack="false"
            Width="350"
            Font-Size="X-Large"
            >
        </asp:DropDownList>
    </div>      
    </form>      
</body>      
</html>

More asp.net examples