Select elements with color boxes

Enable styling dropdown boxes and inserting images or color boxes by replacing Select elements with Definition List (DL) elements. This is based on the excellent tutorial posted at: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

HTML

<dl class="dropdown">
        <dt ><a href="#"><span>Color</span></a></dt>
        <dd>
            <ul>
                <li><a href="#"><span class="color" style="background-color:Red">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                Red<span class="value">Red</span></a></li>
                <li><a href="#"> <span class="color" style="background-color:Green">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                Green<span class="value">Green</span></a></li>
                <li><a href="#"> <span class="color" style="background-color:Black">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                Black<span class="value">Black</span></a></li>
                <li><a href="#"> <span class="color" style="background-color:White">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                White<span class="value">White</span></a></li>
            </ul>
        </dd>
    </dl>

CSS

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
        .dropdown dd { position:relative; }               
        
        /* The visible container */    
        .dropdown dt a {background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center ; display:block; padding-right:20px;width:70px; border: 1px solid #d3d3d3;}       
        /*.dropdown dt a span {cursor:pointer; display:block; padding:0px 5px 0px 5px;line-height: 18px; vertical-align: middle; }*/
         .dropdown dt a:hover { color:#212121; border: 1px solid #999999;}
         
          /* Text for both (box and options) */
         .dropdown a, .dropdown a:visited { color:#555555; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#212121;}        
         
          /* The container for the dropdown options */         
          .dropdown dd ul { background:#ffffff none repeat scroll 0 0; border:1px solid #d3d3d3; color:#555555; display:none; left:0px; padding:5px 0px; position:absolute; top:0px; width:90px; list-style:none;}  
         
         /* The dropdown options */                 
        .dropdown dd ul li a { padding:5px; display:block;}                         
        .dropdown span.value { display:none;}  
            
         /* If using images */       
        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        /* If using colors */     
        .dropdown .color { border: 1px solid silver; vertical-align:middle; margin-right:5px; min-width: 10px;}

JavaScript

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

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

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

});