How to customize a dropdown list ?


How can I customize a dropdown list in these two cases:
1. First, I want that the dropdown list shows some items in blue color, others in green color and others in black.

2. Second, I want to associate an icon to each item in the dropdown list.

Who is Participating?
pgirardierConnect With a Mentor Author Commented:
The question is about a dropdown column in a list and not a drop down menu.
I think, the best solution will be to develop a custom column.


If you want such special functionalities, you have to implement your own custom field. A sample can be found here

pgirardierAuthor Commented:
trax75, thank you quick reply.

What about JQuery, can it offer a solution?

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.


yes JQuery can be part of the solution (see also - it will be your user control for your custom field.

Steve KrileCommented:
I found this to be awesome.

And, attached is a working example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="" language="javascript"></script>

        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .desc { color:#6b6b6b;}
        .desc a {color:#0092dd;}

        .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative;}
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#5d4617;}
        .dropdown dt a:hover, .dropdown dt a:focus { color:#5d4617; border: 1px solid #5d4617;}
        .dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
                        border:1px solid #d4ca9a; width:150px;}
        .dropdown dt a span {cursor:pointer; display:block; padding:5px;}
        .dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                          left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}

        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }


<dl class="dropdown">
    <dt><a href="#"><span>Please select the country</span></a></dt>
            <li><a href="#">Brazil<span class="value">BR</span></a></li>
            <li><a href="#">France<span class="value">FR</span></a></li>
            <li><a href="#">Germany<span class="value">DE</span></a></li>
            <li><a href="#">India<span class="value">IN</span></a></li>
            <li><a href="#">Japan<span class="value">JP</span></a></li>
            <li><a href="#">Serbia<span class="value">CS</span></a></li>
            <li><a href="#">United Kingdom<span class="value">UK</span></a></li>
            <li><a href="#">United States<span class="value">US</span></a></li>


			$(".dropdown dt a").click(function() {
			    $(".dropdown dd ul").toggle();

			$(".dropdown dd ul li a").click(function() {
				var text = $(this).html();
				$(".dropdown dt a span").html(text);
				$(".dropdown dd ul").hide();

			$(document).bind('click', function(e) {
				var $clicked = $(;
				if (! $clicked.parents().hasClass("dropdown"))
					$(".dropdown dd ul").hide();




Open in new window

pgirardierAuthor Commented:
Torsten, thank you for the suggested solution, and what do you mean by "it will be your user control for your custom field" ?

Skrile, thank you for the suggested URL and example, but the above example is dealing with an HTML dropdown which does not have the same representation as a Sharepoint dropdown.
So, is it possible to get the same result with a standrad Sharepoint drodown by making some modifications on the above example?

Steve KrileCommented:
No.  "Standard Sharepoint Dropdown"....hmmm.  Sharepoint uses <select> controls for most of their dropdowns.  I've run in to a fellow that has posted some code to customize Sharepoint controls as you suggest here, but I must warn you - it is NOT easy.

I don't know anything about the following example, but it may be along the lines of what you are trying to do.

Steve KrileCommented:
Actually, the comment #29082758 is exactly what the original questioner asked for.  This blog covers how to stylize a drop down menu in Sharepoint.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.