div {position: relative;}
	
div > input {
	height: 16px;
	width: 16px;
	position: absolute;
	left: 0;
	opacity: 0;
}

div > label { 
	line-height: 16px; 
	padding: 0 0 0 18px;
	font-size:15px;
}

input + label {
	background: url(../img/gr_custom-inputs.png) 0 -1px no-repeat;
	height: 16px;
}

input[type=radio] + label { background-position: 0 -161px; }

/* Checked styles */
input[type=radio]:checked + label { background-position: 0 -241px; }
input[type=checkbox]:checked + label { background-position: 0 -81px; }

/* Disabled styles */
input[type=radio]:disabled + label { background-position: 0 -221px; }
input[type=checkbox]:disabled + label { background-position: 0 -61px; }

/* Disabled and Checked styles */
input[type=radio]:disabled:checked + label { background-position: 0 -301px; }
input[type=checkbox]:disabled:checked + label	{ background-position: 0 -141px; }


<div><input type="radio" value="male" id="male" name="gender" /> <label for="male">Male</label></div>

checkbox & radio custom style

CSS