Hi all,

Here is an example of custom radio button and check box using pure css.
I hope it will helps you.

CSS :-

**/*Radio button*/
.radio, .checkbox{display: inline-block;}
.radio { padding:5px; margin-left:40px; }
.radio input[type="radio"] { opacity: 0; position: absolute; cursor:pointer;}
.radio input[type="radio"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
.radio input[type="radio"]:checked + label > mark:before { content:' '; background:#0d7fbe; width:12px; height:12px; display:inline-block; margin:4px; border-radius:20px;}
.radio input[type="radio"] + label > mark { display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:15px; border:1px solid #009df5; background:#fff; text-indent: 0; }
/*Radio button*/
/*Check box*/
.checkbox { padding:5px; margin-left:40px; }
.checkbox input[type="checkbox"] { opacity: 0; position: absolute; }
.checkbox input[type="checkbox"] + label { color:#555; line-height:25px; display:inline-block; text-indent:-38px; }
.checkbox input[type="checkbox"] + label > mark { position:relative; display:inline-block; width:20px; height:20px; vertical-align:middle; border-radius:5px; border:1px solid #009df5; background:#fff; text-indent: 0; }
.checkbox input[type="checkbox"]:checked + label > mark:before {background: #0d7fbe;content: " ";height: 4px;left: 4px;position: absolute;top: 10px;transform: rotate(45deg);width: 8px;}
.checkbox input[type="checkbox"]:checked + label > mark:after {  background: #0d7fbe;content: " ";height: 11px;left: 11px;position: absolute;top: 5px;transform: rotate(45deg);width: 4px;}
/*Check box*/**

HTML : -

<div class="radio">
      <input type="radio" name="id" id="id_0" value="x">
      <label for="id_0"><mark></mark> Yes</label>
    </div>
    <div class="radio">
      <input type="radio" name="id" id="id_1" value="y">
      <label for="id_1"><mark></mark> No</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="checkThis" id="checkThis" value="checkThis" checked>
      <label for="checkThis"><mark></mark> Yes</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="checkThis2" id="checkThis2" value="checkThis2">
      <label for="checkThis2"><mark></mark> No</label>
    </div>

Output :-