UI BUTTONS

by bizamajig

HTML

<form action="#" method="post">
  <h2>How do you take it?</h2>
  <ul id="customselect">
    <li><a href="1" class="link">0 <span>Sugar</span></a></li>
    <li><a href="2" class="link">1 <span>Sugar</span></a></li>
    <li><a href="3" class="link">2 <span>Sugars</span></a></li>
  </ul>
  <select name="options" id="frm_options" multiple>
    <option value="Nothing Selected">Nothing Selected</option>
    <option value="1">No Sugar</option>
    <option value="2">1 Sugar</option>
    <option value="3">2 Sugars</option>
  </select>
  <div >
  <INPUT NAME="options" TYPE="CHECKBOX" value="1"> Option 1<BR>
  <INPUT NAME="options" TYPE="CHECKBOX" value="2"> Option 2<BR>
  <INPUT NAME="options" TYPE="CHECKBOX" value="3"> Option 3<BR>
    </div>
</form>

CSS

body { background-color:#efefef; font-family:Arial, Helvetica, sans-serif; margin:60px; }

h2 { background: url(1326911803_kteatime.png) no-repeat; line-height:38px; padding:0 0 0 50px; font-size:18px; color:#666; }

ul#customselect { margin:0; padding:0; display:block; height:auto; overflow:hidden; margin:0 0 20px 0 !important; }

ul#customselect li { float:left; display:inline-block; margin:0 10px 0 0; cursor:pointer; }

#customselect li a { width:60px; height:60px; padding: 5px; background:#FFF; float: left; border:6px solid #CCC; border-radius:12px; text-decoration:none; text-align:center; font-weight:bold; color:#666; font-size:38px; letter-spacing:-2px; }

#frm_options { clear:both; display:block; }

#customselect li a span { display:block; font-size:11px; letter-spacing:0; }

.selected { border: 6px solid #4a7329 !important; color:#4a7329 !important; background:#dbeccd !important; }

JavaScript

$(document).ready(function() {
          $('.link').click(function() { 
            //$('#frm_options').val($(this).attr('href')); 
            elem = $('#frm_options [value='+$(this).attr('href')+']');
              if (elem.is(':selected')) {
                  elem.removeAttr('selected');
                  $(this).removeClass('selected');
              } else {
                  elem.attr('selected','true'); 
                  $(this).addClass('selected'); 
              }
            return false; 
        });
    $('#frm_options option').on('mousedown', function() {
        elem = $('#customselect .link[href='+$(this).val()+']');
        if ($(this).is(':selected')) {
            $(this).removeAttr('selected');
            elem.removeClass('selected');
        } else {
            $(this).attr('selected','true');
            elem.addClass('selected'); 
        }
        return false;
    });
        
});