Radio Box Buttons

Simple example of radio box form elements re-styled as buttons.

by Axelvaisper

HTML

<body>
<form>
    <fieldset>
      <legend>Fill in the following details to create your poster.</legend>

      <label for="option-1" class="tab-label-1 radio">
        <input id="option-1" class="radio" type="radio" name="radio-set" checked>
        Cat
      </label>

      <label for="option-2" class="tab-label-2 radio">
        <input id="option-2" class="radio" type="radio" name="radio-set">
        Dog
      </label>
      
      <label for="option-3" class="tab-label-3 radio">
        <input id="option-3" class="radio" type="radio" name="radio-set">
        Other?
      </label>

      <input type="text" id="radio-text" value="Cat" readonly>

      <div class="form-actions">  
        <button type="submit" class="btn btn-primary">Create Poster</button>  
        <button class="btn">Reset &amp; Start Again</button>  
      </div>  

    </fieldset>
</form>
</body>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

label.radio {
    border:3px outset #999;
    background: #aaa;
    display:block;
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:2em;
    float:left;
    width:31%;
    margin:10px 1%;
}

label < input:checked {

}

input.radio{
    display:none;
}

label.tab-label-1 {
    background: #888;
    border-style:inset;
}

JavaScript

$(document).ready(function() {
    // jquery code
    $("input[name='radio-set']").change(function() {
        var text = $.trim($("input[name='radio-set']:checked").parent().text());
        
        //Update the Text Box and Take off
        //Readonly if Other is selected.
        $("#radio-text").val(text);
        if (text === "Other?") {
            $("#radio-text").removeAttr("readonly").focus().select();

        } else {
            $("#radio-text").attr("readonly", "readonly");
        }
        //Style the selected (since parent don't work
        //in CSS).
        $("input[name='radio-set']").parent().css({'background-color': '#aaa', 'border-style':'outset'});
        $("input[name='radio-set']:checked").parent().css({'background-color': '#888', 'border-style':'inset'});
    });
});