The ASP.NET Ajax Control Toolkit includes an “Styled Dropdown” control extender.
In this series I’ve been demonstrating ways to implement the features of the MS Ajax Toolkit with jQuery.

HTML has the <select> element for drop down lists and ASP.NET has the DropDownList control, but the styling is pretty plain.

Luckily, we can us a jQuery plugin to change the styling of both <select> and <asp:DropDownList>
By default the DropDownList looks like this:

While this works fine we might want to style the DropDown to match our UI of to obviate the context of our dropdown.

You can find the plugin we will use here:
The custom styling will consist of a combination css and the following background image.

The page markup is as follows:

<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeFile='Default.aspx.cs' 
		 Inherits='_Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Styles/Selectbox.css' rel='stylesheet' type='text/css' />
	<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js'
            type='text/javascript' charset='utf-8'></script>
	<script type='text/javascript' src='Scripts/jquery.selectbox-0.5.js'>
	</script>
    <script src='Scripts/PageScript.js' type='text/javascript'></script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' title='ASP.NET Website'>www.asp.net</a>.
    </p>

    <p>
    <asp:DropDownList runat='server' name='Items' id='Items'
                      class='StyledDD' ClientIDMode='Static'>
      <asp:ListItem>One</asp:ListItem>
      <asp:ListItem>Two</asp:ListItem>
      <asp:ListItem>Three</asp:ListItem>
      <asp:ListItem>Four</asp:ListItem>
    </asp:DropDownList>
    </p>
</asp:Content>


As you can see, in addition to the jQuery library, I’ve included a CSS file for the styling of the dropdown, a PageStyle.js file which is our page specific jQuery code, and the jquery.selectbox.js file.

The style that we will be applying to the DropDown is:


/* Drop down styles*/
div.selectbox-wrapper {
  position:absolute;
  width:400px;
  background-color:white;
  border:1px solid #ccc;
  margin:0px;
  margin-top:-10px;
  padding:0px;
  text-align:left;
  max-height:200px;
  overflow:auto;
}

/*Drop down list styles*/
div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
  background-color: #EAF2FB;
}

/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
  background-color: #CDD8E4;
}

/* Drop down list items style*/
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}

/* Look and feel of select box */
.selectbox
{
  margin: 0px 5px 10px 0px;
  padding-left:2px;
  font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:1em;/* Resize Font*/
  width : 190px; /* Resize Width */
  display : block;
  text-align:left;
  background: url('../images/bg_select.png') right;
  cursor: pointer;
  border:1px solid #D1E4F6;
  color:#333;
}

Note the reference to the background image file.
The names of the css classes are specific as the jQuery plugin references them directly to apply the DropDownList
Then our PageScript.js simply implements a jQuery Ready event handler to wire up the DropDown plugin to any HTML Select or ASP.NET DropDown that uses the CSS Class “StyledDD”

$(document).ready(function () {
    $('.StyledDD').selectbox();
});

You can download the source code [ HERE ].