I don't know what the specific name to this kind of form controller is (if there even is one), but basically I want to change radio elements like so;

<input type="radio" name="size" value="S" id="size_S" />
  <label for="size_S">S</label>
<input type="radio" name="size" value="M" id="size_M" />
  <label for="size_M">M</label>
<input type="radio" name="size" value="L" id="size_L" />
  <label for="size_L">L</label>

...into stylized links, the checked of which has a special class. For an example, I'd list the size selection element on Macys.

How can I turn the radios into these kinds of box links? Is there a library or plug-in that already does this?

I can modify the DOM, but the elements need to be radio buttons for the convenience of non-JS users.

I don't know what the specific name to this kind of form controller is (if there even is one), but basically I want to change radio elements like so;

<input type="radio" name="size" value="S" id="size_S" />
  <label for="size_S">S</label>
<input type="radio" name="size" value="M" id="size_M" />
  <label for="size_M">M</label>
<input type="radio" name="size" value="L" id="size_L" />
  <label for="size_L">L</label>

...into stylized links, the checked of which has a special class. For an example, I'd list the size selection element on Macys..

How can I turn the radios into these kinds of box links? Is there a library or plug-in that already does this?

I can modify the DOM, but the elements need to be radio buttons for the convenience of non-JS users.

• javascript
• jquery
• css
• radio-button

• What have you tried? – j08691 Commented May 28, 2012 at 1:11

2 Answers 2

You can pretty much reuse the standard form elements. With js enabled, hide the radio buttons, style the labels, and bind a click event to add the active/selected class. Clicking a label will still select the underlying radiobutton.

Example jsFiddle: http://jsfiddle/Y6BzY/

JS

$('input[type="radio"], label').addClass('js');

$('label').on('click', function() {
    $('label').removeClass('active');
    $(this).addClass('active');
});

CSS

input[type="radio"].js {
    display: none;
}

label.js {
    display: block;
    float: left;
    margin-right: 5px;
    border: 1px solid black;
    padding: 4px;
    cursor: pointer;
}

label.js.active {
    border: 1px solid blue;
    color: blue;
}

Ephram,

I visited the link you have provided and all I can see there are spans with a number in them for size selection. Did you mean those, or like those?

About you're question: I understand that the reason to show links instead of boxes would be the absence of js support. Have you considered using a tag with hardcoded radio buttons in them and spans, like in your example, outside the noscript tags?

In any case, I don't really see the need to manipulate the DOM for this to be honest.