Custom Radio Button Groups

HTML

<div class="group">
<input id="Radio1" name="Radios" type="radio" value="First Option" >
<label class="first" for="Radio1">First Option</label>
<input id="Radio2" name="Radios" type="radio" value="Other Option" checked="checked">
<label for="Radio2">Other Option</label>
<input id="Radio3" name="Radios" type="radio" value="Other Option" >
<label for="Radio3">Other Option</label>
<input id="Radio4" name="Radios" type="radio" value="Other Option" >
<label for="Radio4">Other Option</label>
<input id="Radio5" name="Radios" type="radio" value="Last Option" >
<label class="last" for="Radio5">Last Option</label>
</div>
<br /><br /><br />
<div class="group">
<input id="checkbox1" name="checkboxs" type="checkbox" value="First Option" checked="checked">
<label class="first" for="checkbox1">First Option</label>
<input id="checkbox2" name="checkboxs" type="checkbox" value="Other Option" >
<label for="checkbox2">Other Option</label>
<input id="checkbox3" name="checkboxs" type="checkbox" value="Other Option" >
<label for="checkbox3">Other Option</label>
<input id="checkbox4" name="checkboxs" type="checkbox" value="Other Option" >
<label for="checkbox4">Other Option</label>
<input id="checkbox5" name="checkboxs" type="checkbox" value="Last Option" >
<label class="last" for="checkbox5">Last Option</label>
</div>

CSS

body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}

input[type="radio"], 
input[type="checkbox"] {
    /* hide the inputs */
    opacity: 0;
    display: none;
    margin: 0;
}

/* style your lables/button */
input[type="radio"] + label, 
input[type="checkbox"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    float: left;
    padding: 4px 10px;
    background: #efefef;
    color: #aaa;
    border: 1px solid #ccc;
    text-shadow: 1px 1px 0 rgba(0,0,0,0);
}

input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label{
    /* style for the checked/selected state */
    background: #777;
    border-color: #444;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    color: white;
}

.first {
    border-radius: 4px 0 0 4px;
}

.last {
    border-radius: 0 4px 4px 0;
}