Dropdown Select

A CSS styled drop-down using DropKick (http://jamielottering.github.com/DropKick/).

by bizamajig

HTML

<script src="http://jamielottering.github.com/DropKick/js/jquery.dropkick.1-0.1.js"></script>
<!-- We will use Twitter handles as an example but hypothetically, it could be anything you wanted to select and show the user what they selected. -->

<select class="change" id="select">
    <option value=""></option>
    <option value="@BlueTidePro" selected="selected">@BlueTidePro</option>
    <option value="@Twitter">@Twitter</option>
    <option value="@Username">@Username</option>
    <option value="@Username2">@Username2</option>
    <option value="addremove">+ Add/Remove Options</option>
</select>

CSS

/* Only for the demo */
* {margin:0; padding:0;}
body {background:#fff; margin:40px; padding:0; background:#eefbff url('http://subtlepatterns.com/patterns/gplaypattern.png') top left repeat;}

/* Styles */
ul.dk_options_inner li:last-child{border-top:2px solid rgba(3, 85, 110, 0.7);}
a.dk_toggle{-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; text-decoration:none; width:auto !important; display:inline-block; color:#fff; text-shadow: 0 1px 0 rgba(3, 85, 110, 0.6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(59, 190, 230, 1.0) inset, 0 1px 10px rgba(3, 85, 110, 0.4) inset; border: 1px solid rgba(3, 85, 110, 0.7); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -khtml-border-radius: 6px; background: #00a0d1; background: -moz-linear-gradient(top,  #00a0d1 0%, #008db8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a0d1), color-stop(100%,#008db8)); background: -webkit-linear-gradient(top,  #00a0d1 0%,#008db8 100%); background: -o-linear-gradient(top,  #00a0d1 0%,#008db8 100%); background: -ms-linear-gradient(top,  #00a0d1 0%,#008db8 100%); background: linear-gradient(top,  #00a0d1 0%,#008db8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0d1', endColorstr='#008db8',GradientType=0 ); padding: 0 7px 0 0; z-index:10;}
a.dk_toggle span{float:left; margin-left:7px; padding:7px 0 7px 0;}
a.dk_toggle span.text{border-right:1px solid rgba(59, 190, 230, 0.6); padding-right:7px;}
a.dk_toggle span.arrow_down{border-left:1px solid rgba(3, 85, 110, 0.4);margin:0; padding-left:7px;}
a.dk_toggle span.smallertext{float:none; margin:0; padding:0; font-size:11px; position:relative; top:-1px;}
a.dk_toggle:hover{box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(59, 190, 230, 1.0) inset, 0 1px 10px rgba(3, 85, 110, 0.3) inset; background: #00a0d1;...

JavaScript

$(function() {

    // DropKick core - http://jamielottering.github.com/DropKick/
    
    $('.change').dropkick({
        change: function(value, label) {
            // Check if it's the "addremove" value to do something with that - either go to a new page or maybe you could trigger a modal or something.
            if (value == 'addremove') {
                document.location.href = 'google.com';
            } else {
                alert('You picked: ' + value);
            }
            $('a.dk_toggle').html('<span class="text">' + '<span class="smallertext">' + value + '</span></span><span class="arrow_down">Drop-Down</span>');
        }
    });

    // Set the default "selected" item
    $selectedval = ' <span class="smallertext">' + $('select#select option:selected').val() + '</span>';
    $('a.dk_toggle').html('<span class="text">' + 'Select' + $selectedval + '</span><span class="arrow_down">Drop-Down</span>');

});