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><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);" title="Black"><div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Black" data-Color="Black" class="cbx"/></div>Black</a>

        </li>
        <li><a href="#"><div style="background-color: #151B8D" class="color" onclick="toggle_colorbox_alt(this);" title="Midnight Blue"><div class=CheckMark>&#10003;</div>
  <input type="checkbox" name="color[]" value="Midnight_Blue" data-Color="Midnight_Blue" class="cbx"/></div>Blue</a>

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

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

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

CSS

body {
             font: 7.5pt Verdana, Arial, sans-serif;
             color: #555555;
         }
         .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;
         }
         .dropdown_container a {
             color:#555555;
             text-decoration:none;
             outline:none;
         }
         .dropdown_container a:hover {
             color:#212121;
         }
         .dropdown_container ul {
             width:265px;
             display:none;
             position:absolute;
             top:0px;
             left:0px;
             margin:0px;
             padding:5px 0px;
             /* Was padding:0px; */
             list-style:none;
             background:#ffffff none repeat scroll 0 0;
             border:1px solid #d3d3d3;
             color:#555555;
         }
         .dropdown_container ul li {
             float:left;
             vertical-align:middle;
             line-height: 1.65em;
         }
         .dropdown_container ul li a {
             padding:0px;
             display:block;
         }
         .color {
             border: 1px solid silver;
             vertical-align:baseline;
             margin-right:4px;
             width: 1.65em;
             height:1.65em;
            ...

JavaScript

$(document).ready(function () {
    $(".dropdown_box").click(function () {
        $("#select_colors").show();
    });
    $("#select_colors").mouseleave(function () {
        $("#select_colors").hide();
    });
    $(".dropdown_container ul li a").click(function () {
        var text = $(this).html();
        $(".dropdown_box span").html(text);
    });

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

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;
    }
}