checkbox-1

Estilizando los checkboxes con css estándar

by kseso

HTML

<section>
<h3>¿Te gusta KsesoCss?</h3>
<div class="checkbox-1">
  		<input type="checkbox" id="ejemplo-1" value="1" name="" />
	  	<label for="ejemplo-1"></label>
  	</div>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Aldrich);
* { margin: 0; padding: 0; border: 0 none;}
section {margin: 20px;}
h3 {display: inline-block; vertical-align: middle; font-family: 'Aldrich', sans-serif; color: #BCB589; font-size: 25px;}
input[type=checkbox] {
  visibility: hidden;
}
.checkbox-1 {
    display: inline-block;
    vertical-align: middle; 
	width: 40px;
	height: 40px;
	background: #ededed;
	margin-left: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	position: relative;
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
}
.checkbox-1 label {
	background: #909090;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	box-shadow: 0 0 5px rgba(0,0,0,0.7) inset;   
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}
.checkbox-1 input[type=checkbox]:checked + label {
	background: #FF7361;
	width: 30px;
	height: 30px;
    top: 5px;
    left: 5px;
}