Hello all, In this blog today, I am going to show u how with the help of CSS, We can easily create custom checkbox and radio buttons. Following is the HTML and CSS code, which shows how to create your own checkbox and radio button. 

HTML :-

<div class="mainContainer">
    <div class="checkboxContainer">
        <input type="checkbox" id="check1" name="options" />
        <label for="check1">Option 1</label>
        <input type="checkbox" id="check2" name="options" />
        <label for="check2">Option 2</label>
        <input type="checkbox" id="check3" name="options" />
        <label for="check3">Option 3</label>
        <input type="checkbox" id="check4" name="options" />
        <label for="check4">Option 4</label>
    </div>
    <div class="radioContainer">
        <input type="radio" id="radio1" name="type" />
        <label for="radio1">Type 1</label>
        <input type="radio" id="radio2" name="type" />
        <label for="radio2">Type 2</label>
        <input type="radio" id="radio3" name="type" />
        <label for="radio3">Type 3</label>
        <input type="radio" id="radio4" name="type" />
        <label for="radio4">Type 4</label>
    </div>
</div>

CSS :- Normally default Checkbok and radio button doesn't have any styling, the simple checkbox has checked sign in it and radio button has dotted sign when selected but, If we want to create custom Checkbox and Radio buttons , we can also add our own styling for better look for these two as shown :- 

body {
    font: normal 12px/1 Arial,helvetica,sans-serif;
    color: #333;
    background: #eee;
}
.mainContainer {
    width: 360px;
    height: 104px;
    position: absolute;
    margin-left: -180px;
    left: 50%;
    top: 20%;
    background: #fff;
    padding: 30px 30px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 1px #ddd;
    -moz-box-shadow: 0 1px 1px #ddd;
    box-shadow: 0 1px 1px #ddd;
}
.checkboxContainer, .radioContainer {
    margin-bottom: 30px;
}
/* RADIO */
input[type='radio'] {
    display: none;
}
input[type='radio'] + label {
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
input[type='radio'] + label:before {
    content: '';
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #eee;
    margin-right: 5px;
    top: 4px;
}
input[type='radio']:checked + label:before {
    background-color: #aaa; 
}
input[type='radio']:checked + label:after {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: absolute;
    left: 4px;
    top: 4px;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    content: '';
}
input[type='checkbox'] {
    display: none;
}
input[type='checkbox'] + label {
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}
input[type='checkbox'] + label:before {
    content: '';
    display: inline-block;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: #eee;
    position: relative;
    top: 4px;
    margin-right: 5px;
}
input[type='checkbox']:checked + label:before {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    background-color: #aaa;
}
input[type='checkbox']:checked + label:after {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    background: #fff;
    position: absolute;
    left: 3px;
    top: 3px;
}

Following is the given link which shows the output of how to create custom checkbox and radio buttons :-

 https://jsfiddle.net/eucam7jh/