Custom Checkbox

Customizing html checkbox using css

by jithinnjose

HTML

<div class="customCheckBoxDiv">
    <input type="checkbox" value="None" class="loginCheckBox" name="check" checked />
    <label class="checkLabel"></label> <span>Remember Me</span>

</div>

CSS

.customCheckBoxDiv {
    position:relative;
    float:left;
}
.customCheckBoxDiv span {
    margin-left:25px;
    color:#0066cc;
}
.loginCheckBox {
    opacity:0;
    position:absolute;
    z-index:1;
    cursor:pointer;
}
.checkLabel {
    width: 13px;
    height: 13px;
    border: 1px solid #00cc00;
    background: #fff;
    position: absolute;
    left: 4px;
    top: 3px;
}
.loginCheckBox:checked + label {
    border: 1px solid #00cc00 !important;
    background: #00cc00 !important;
    box-shadow: inset -2px 0px 0px 0px #fff, inset 2px 0px 0px 0px #fff, inset 0px -2px 0px 0px #fff, inset 0px 2px 0px 0px #fff !important;
}