CSS Checkboxes

by Avinashullal

HTML

<h2>Style One</h2>

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

<table class="style2">
    <tr>
        <td>
            <input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox" />
            <label for="checkboxG3" class="css-label">Option 1</label>
        </td>
        <td>
            <input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox" checked="checked" />
            <label for="checkboxG4" class="css-label">Option 2</label>
        </td>
    </tr>
</table>
<br>
<hr class="style-hr">

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;
}
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=checkbox].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=checkbox].css-checkbox + label.css-label {
    padding-left:30px;
    height:25px;
    display:inline-block;
    line-height:25px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:25px;
    vertical-align:middle;
    cursor:pointer;
}
.style1 input[type=checkbox].css-checkbox:checked + label.css-label {
    background-position: 0 -25px;
}
.style1 label.css-label {
    background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_8ecaa1e1adf85a67682181614f4b367c.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=checkbox].css-checkbox {
    position:absolute;
    z-index:-1000;
    top:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
   ...

JavaScript

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