Here  is the CSS for custom checkbox. We can add our own properties in the check box.

HTML-

<div class="radio_input">
	<input type='radio' id='r1'name='radios' checked='true'/>
	<label for='r1'><span></span>
	Male
	</label>

	<input type='radio' id='r2' name='radios'/>
	<label for='r2'><span></span>Female</label>
</div>

CSS-

.radio_input {
			width: 330px;
			padding-top: 20px;
			margin: 0 auto;
		}
		.radio_input > input[type='radio'] {
		    display:none;    
		}
		.account_form ul li .radio_input > label {    
		    display:table;  
		    width: auto; 
		    color: #3F3F3F;font-weight: 300; 
		    padding-right: 28px; 
		}
		.radio_input > label > span {
		    display:table-cell;
		    width:50px;    
		    white-space:nowrap;    
		}
		.radio_input > label > span:before {
		    content:'';
		    width:40px;
		    height:40px;
		    border-radius:50%;
		    display:inline-block;
		    vertical-align:middle;    
		    background-color:#545353;
		    border: 1px solid #424242;
		}
		.radio_input > label > span:after {
		    content:'';
		    position:relative;    
		    display:inline-block;
		    vertical-align:middle; 
		    left:-29px;    
		    width:18px;
		    height:18px;
		    border-radius:50%;
		    background:radial-gradient(circle at 2px 2px, #FFB156, #FF7B0B);
		    visibility:hidden;
		}
		.radio_input > input[type='radio']:checked + label > span:after {
		    visibility:visible;
		}

Here is the link -

https://jsfiddle.net/fhaay0yw/