CSS Radio Buttons

by Avinashullal

HTML

<h2>Style One</h2>

<table class="style1">
    <tr>
        <td>
            <input type="radio" name="style1" id="radio1" class="css-checkbox" />
            <label for="radio1" class="css-label radGroup1">Option 1</label>
        </td>
        <td>
            <input type="radio" name="style1" id="radio2" class="css-checkbox" checked="checked" />
            <label for="radio2" class="css-label radGroup1">Option 2</label>
        </td>
    </tr>
</table>
<br>
<hr class="style-hr">
 <h2>Style Two</h2>

<table class="style2">
    <tr>
        <td>
            <input type="radio" name="style2" id="radio3" class="css-checkbox" />
            <label for="radio3" class="css-label radGroup2">Option 1</label>
        </td>
        <td>
            <input type="radio" name="style2" id="radio4" class="css-checkbox" checked="checked" />
            <label for="radio4" class="css-label radGroup2">Option 2</label>
        </td>
    </tr>
</table>
<br>
<hr class="style-hr">
 <h2>Style Three</h2>

<table class="style3">
    <tr>
        <td>
            <input type="radio" name="style3" id="radio5" class="css-checkbox" />
            <label for="radio5" class="css-label radGroup3">Option 1</label>
        </td>
        <td>
            <input type="radio" name="style3" id="radio6" class="css-checkbox" checked="checked" />
            <label for="radio6" class="css-label radGroup3">Option 2</label>
        </td>
    </tr>
</table>

CSS

html {
    height: 100%;
    position: relative;
}
body {
    background-color: #fff;
    height: 100%;
    font-family: Segoe UI, Open Sans;
    font-size: 14px;
    color: #393939;
    line-height: 1.5;
    margin:0;
    padding:10px;
}
label
{
    font-weight:300;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Segoe UI Light, Open Sans, sans-serif;
    font-weight: 100;
    color:#e7534f;
}
hr.style-hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
/****Style One*****/
 .style1 input[type=radio].css-checkbox {
    position:absolute;
    z-index:-1000;
    top:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px;
    width:1px;
    margin:-1px;
    padding:0;
    border:0;
}
.style1 input[type=radio].css-checkbox + label.css-label {
    padding-left:21px;
    height:16px;
    display:inline-block;
    line-height:16px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:16px;
    vertical-align:middle;
    cursor:pointer;
}
.style1 input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -16px;
}
.style1 label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e564369ae9952458794adc989a44af60.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/****Style Two*****/
 .style2 input[type=radio].css-checkbox {
    position:absolute;
    z-index:-1000;
    top:-1000px;
    overflow: hidden;
    clip:...

JavaScript

//CSS CHECKBOX - README AND INSTALLATION GUIDE - www.csscheckbox.com
//1. Open the included file 'style.css' and copy the CSS code into your own stylesheet
//2. Change the classes of your HTML Radio Buttones to 'css-checkbox'
//3. Change the classes of your HTML Radio Button Labels to 'css-label'
//4. MAKE SURE that the ID of your Radio Button matches the FOR attribute of your HTML Label tag
//Refer to the included file 'demo.html' for HTML samples and syntax.

//http://www.csscheckbox.com/