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.
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>


- How to add attributes to DropDownList items
- How to add CSS class to DropDownList each items
- How to change DropDownList alternate item color
- How to change DropDownList item background color
- How to highlight an item in a DropDownList
- How to remove arraow from DropDownList
- How to change DropDownList arrow image
- How to retrieve multiple selected values from CheckBoxList
- How to create a horizontal CheckBoxList
- How to show ScrollBar in a CheckBoxList