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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.


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?


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

Newly released Acronis True Image 2019

In announcing the release of the 15th Anniversary Edition of Acronis True Image 2019, the company revealed that its artificial intelligence-based anti-ransomware technology – stopped more than 200,000 ransomware attacks on 150,000 customers last year.

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


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.