@bobnoordam

Styling your dropdownlist and dropdownlist items in ASP.NET

Posted on | By bobnoordam

Dropdownlists are a much used component in ASP.NET web development. While styling the dropdownlist in it’s default state is intuitive, styling the list items themselves is not. First things first, we will use the following CSS for the styling: 

.DropDownListStyle {
    margin-top: 8px;
}

.DropDownListItemStyle {
    background-color: #eee;
    margin: 8px;
    padding: 8px;
}

As you would expect, the dropdownlist itself is styled in the markup on the page with the CSSCLASS tag: 

<asp:DropDownList ID="DropDownListSomeThing" runat="server"
                  CssClass="DropDownListStyle"
                  AutoPostBack="True"
                  OnSelectedIndexChanged="DropDownListSomeThing_OnSelectedIndexChanged">
</asp:DropDownList>

Having taken care of the container, the next step is to add class attributes to the list items. Since we cannot do this in the markup directly, we will need to supply it from code. Since we need to supply this additional tag on every post back we need to add a class attribute not only when creating the listitems, but also on the page_load event. 

foreach (ListItem item in DropDownListSomeThing.Items) {
    item.Attributes.Add("class", "DropDownListItemStyle");
}

Please note that browser support varies. The best results are obtained with FireFox which support full styling. Chrome and some others seem to be limoited to setting the background and font colors. Olders browsers usualy support no styling at all. IF you want extensive styling you will probaly need to resort to jquery and styling a list, or something like the devexpress control suite (see below) 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .DropDownListStyle { padding: 10px; }

        .DropDownListItemStyle { padding: 10px; }
    </style>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <dx:ASPxComboBox ID="ASPxComboBox1" runat="server" ValueType="System.String"
                         DropDownStyle="DropDownList"
                         AutoPostBack="True"
                         OnSelectedIndexChanged="ASPxComboBox1_OnSelectedIndexChanged"
                         Width="300px" Theme="MetropolisBlue"
                         IncrementalFilteringMode="None"
                         ItemStyle-CssClass="DropDownListItemStyle" CssClass="DropDownListItemStyle">
        </dx:ASPxComboBox>
        <asp:Label ID="LabelFeedback" runat="server" Text="Label"></asp:Label>
    </div>
</form>
</body>
</html>
Category: ASP.NET Webforms