CSS CSS3 Radio Input

Edit Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Radio Input With CSS3</title>
<style>
.radio {
	display: inline-block;
	cursor: pointer;
	font-size: 13px;
	margin-right: 10px;
	line-height: 18px;
}
input[type=radio] {
	display: none;
}
.radio:before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	background-color: #0088cc;
	color: #f3f3f3;
	text-align: center;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
	font-size: 30px;
	border-radius: 10px;
}
input[type=radio]:checked + .radio:before {
	content: "\2022";
}
</style>
</head>

<body>
<h1>Custom Radio Input With CSS3</h1>
<section>
		<form>
				<input id="radio" name="radio" type="radio" >
				<label class="radio"  for="radio"> Yes </label>
				<input id="radios" name="radio" type="radio" >
				<label class="radio" for="radios"> No </label>
		</form>
</section>
</body>
</html>
Preview html View