Styled Select Box - with checkboxes, color boxes, and multiple columns

by chayacooper

HTML

<div class="dropdown_box"><span>Colors</span>

</div>
<div class="dropdown_container">
    <ul class="four_columns" id="select_colors">
        <li>
            <label><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a>

            </label>
        </li>
        <li>
            <label><a href="#"><a href="#"><div style="background-color: Navy" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Navy" class="cbx"/></div>Navy</a>

            </label>
        </li>
        <li>
            <label><a href="#"><a href="#"><div style="background-color: #666666" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Charcoal" class="cbx"/></div>Charcoal</a>

            </label>
        </li>
        <li>
            <label><a href="#"><a href="#"><div style="background-color: #ffffff" class="color" onclick="toggle_colorbox_alt(this);"><div class=CheckMark style="color:black">&#10003;</div>
  <input type="checkbox" name="color[]" value="White" class="cbx"/></div>White</a>

            </label>
        </li>
    </ul>
</div>

CSS

body {
            font-size:7pt
        }
        .four_columns li {
            width:25%;
        }
        .dropdown_box {
            background:#ffffff url(images/arrow1.png) no-repeat scroll 97.5% center;
            cursor:pointer;
            display:block;
            font: 7.5pt Verdana, Arial, sans-serif;
            color: #555555;
            padding:0px 25px 0px 5px;
            width:70px;
            line-height: 18px;
            vertical-align: middle;
            border: 1px solid #d3d3d3;
            border-radius:4px;
            -moz-border-radius:4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            margin:0px;
            padding:0px;
        }
        .dropdown_container {
            margin:0px;
            padding:0px;
            position:relative;
            color:#555555;
            text-decoration:none;
            outline:none;
        }
        .dropdown_container ul {
            display:none;
            width:350px;
            position:absolute;
            top:0px;
            left:0px;
            margin:0px;
            padding:5px 0px;
            list-style:none;
            background:#ffffff none repeat scroll 0 0;
            border:1px solid #d3d3d3;
            border-radius:4px;
            -moz-border-radius:4px;
            -webkit-border-radius: 4px;
            -khtml-border-radius: 4px;
            color:#555555;
        }
        .dropdown_container ul:hover {
            border: 1px solid #999999;
            color:#212121;
        }
        .dropdown_container ul li {
            float:left;
            vertical-align:middle;
            line-height: 1.65em;
            padding:0px;
            margin: 2px 0;
            display:block;
        }
        .color {
            border: 1px solid silver;
            vertical-align:baseline;
            margin-right:4px;
            margin-left:6px;
            width: 1.65em;
            height:1.65em;
           ...

JavaScript

$(document).ready(function () {
         $(".dropdown_box").click(function () {
             $("#select_colors").show();
         });

         var timeoutID;
         $("#select_colors").mouseleave(function () {
             timeoutID = setTimeout(function () {
                 $("#select_colors").hide();
             }, 800);
         });
         $("#select_colors").mouseenter(function () {
             clearTimeout(timeoutID);
         });

         $(".dropdown_container ul li").click(function () {
             var text = $(this.children[0]).find("input").val();
             var text_edited = text.replace(/_/g, " ");
             var currentHtml = $(".dropdown_box span").html();
             var numberChecked = $('input[name="color[]"]:checked').length;
             if (numberChecked <= 3) {
                 $(".dropdown_box span").html(currentHtml.replace('Colors', ''));

                 if (numberChecked > 1) {
                     $(".dropdown_box span").append(', ' + text_edited);
                 } else {
                     $(".dropdown_box span").append(text_edited);
                 }
             } else {
                 $(".dropdown_box span").html(currentHtml.replace(currentHtml, numberChecked + " Selected"));
             }
         });

     });

     function toggle_colorbox_alt(span) {
         div = span.getElementsByTagName('div')[0];
         cb = span.getElementsByTagName('input')[0];
         if (cb.checked == false) {
             div.style.visibility = "visible";
             span.className = "color ColorboxSelected";
             cb.checked = true;
         } else {
             div.style.visibility = "hidden";
             span.className = "color";
             cb.checked = false;
         }
     }