create custom radio butoon and checkbox

as all know we can customize web presentations to be almost anything we want it to be using CSS3 and jQuery. In this post, as the title says, we are going to customize the look of checkbox and radio input.

The overall idea is to make default checkbox & radio button invisible & plot on that graphics for checkbox and radio button.

now you think so how to we checked radio button and checkbox simple ans using label.on label click checked radio button and checkbox.
.

Demo

Code :

<input type="checkbox" id="LoginForm_rememberMe" 
class="checkbox">
<label for="LoginForm_rememberMe">
Remember me next time
</label>
<br>
<br>
<input type="radio" id="male" checked="CHECKED" value="male"
 class="radio_button" name="sex">
<label class="for_radio" for="male">
Male
</label>
<br>
<input type="radio" id="female" class="radio_button" 
value="female" name="sex">
<label class="for_radio" for="female">
Female
</label>
<br>

CSS :

First Solution and best Solution :


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
}
button, input {
    line-height: normal;
}
.checkbox + label:before {
    border: 1px solid #DFDFDF;
    border-radius: 3px;
    bottom: 1px;
    box-shadow: 0 1px 5px #DFDFDF inset;
    color: #DFDFDF;
    content:"";
    display: inline-block;
    font-size: 14px;
    height: 13px;
    left: 3px;
    line-height: 17px;
    margin-right: 10px;
    position: absolute;
    text-align: center;
    width: 13px;
}
.checkbox:checked + label:before {
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 5px #DFDFDF inset;
    color: #808080;
    content:"";
    font-family:'fontawesome';
    font-size: 18px;
    left: 3px;
    line-height: 17px;
    text-align: center;
}
input[type="radio"]:checked + label:before {
    border-radius: 100%;
    color: #808080;
    content: "";
    font-family: 'fontawesome';
    font-size: 22px;
    line-height: 18px;
    text-align: center;
}

input[type="radio"] + label:before {
    background-color: #FFFFFF;
    border-radius: 100%;
    bottom: 1px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 
    0 1px 0 0 rgba(255, 255, 255, 0.8);
    color: #DFDFDF;
    content: "";
    display: inline-block;
    font-family: 'fontawesome';
    font-size: 22px;
    height: 16.8px;
    left: 0;
    line-height: 18px;
    margin-right: 10px;
    position: absolute;
    text-align: center;
    width: 18px;
}
input + label {
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    margin-right: 15px;
    padding-left: 25px;
    position: relative;
}

Demo

create custom radio butoon and checkbox
by Parth Chavda