Check box rounded

using pure css

by Ayyappan Sakthivadivel

HTML

<!-- Rounded ONE -->
<div class="roundedOne">
	<input type="checkbox" value="None" id="roundedOne" name="check" />
	<label for="roundedOne"></label>
</div>

CSS

/* ROUNDED ONE */

.roundedOne input[type=radio]{
    display:none;
}

input[type=checkbox] {
	visibility: hidden;
}

.roundedOne {
	width: 28px;
	height: 28px;
	background: #E35325;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
border: #fff solid 1px;
	position: relative;
}

.roundedOne label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;
background-color: #E35325;
	
}

.roundedOne label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: #fff;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	top: 2px;
	left: 2px;
}

.roundedOne label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
}