Convert dropdowns to radio buttons w/o modifying HTML

Question

So this is sort of an exceptional case situation - I have a plugin that I can\'t modify for contractual reasons. It displays a set of drop downs and I need it to display a s

Answer 1

To encapsulate this into a declarative attribute, I extended @BrunoLM 's function to style all 's with a given CSS class into the radio button look.

jsFiddle

HTML

S M L XL 2XL 3XL 4XL 5XL

Result

CSS

/* http://jsfiddle.net/496c9/ */
.radioSelectContainer > select {
  display: none;
}

.radioSelectContainer > label {
  display: inline-block;
  margin: 0.3em 0.3em 0 0;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
}

  .radioSelectContainer > label > span {
    padding: 0.2em;
    text-align: center;
    display: block;
    white-space: nowrap;
  }

  .radioSelectContainer > label > input {
    position: absolute;
    top: -20px;
  }

    .radioSelectContainer > label > input:checked + span {
      background-color: #404040;
      color: #F7F7F7;
    }

JS

// http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery
// http://jsfiddle.net/ChinmayeeG/TkGP8/
$(function () {

  $('.radioSelect').each(function (selectIndex, selectElement) {

    var select = $(selectElement);
    var container = $("
");
    select.after(container);
    container.append(select);

    select.find('option').each(function (optionIndex, optionElement) {
      var radioGroup = select.attr('id') + "Group";
      var label = $("");
      container.append(label);

      $("")
          .attr("value", $(this).val())
          //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below
          .appendTo(label);

      $("" + $(this).val() + "").appendTo(label);
    });

    //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click
    //optional - this logic handles unchecking when clicking on an already checked radio
    container.find(":radio + span").mousedown(
      function (e) {
        var $span = $(this);
        var $radio = $span.prev();
        if ($radio.is(':checked')) {
          var uncheck = function() {
            setTimeout(function () { $radio.prop('checked', false); }, 0);
          };
          var unbind = function() {
            $span.unbind('mouseup', up);
          };
          var up = function() {
            uncheck();
            unbind();
          };
          $span.bind('mouseup', up);
          $span.one('mouseout', unbind);
        } else {
          select.val($radio.val());
        }
      }
    );

    select.change((function () { //select updates radio
      $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true);
    }));
  });
});