HTML
<form>
<div class="wrapper">
<input type="checkbox" class="checkbox" id="checkbox-1" />
<label for="checkbox-1">Чекбокс переключается кликом по тексту ...</label>
<br /><br />
<input type="checkbox" class="checkbox" id="checkbox-2" />
<label for="checkbox-2">... или можно кликнуть прямо по чекбоксу</label>
</div><!-- .wrapper -->
<div class="wrapper">
<input type="radio" class="radio" id="radio-1" name="radio" />
<label for="radio-1">Радиокнопка переключается кликом по тексту ...</label>
<br /><br />
<input type="radio" class="radio" id="radio-2" name="radio" />
<label for="radio-2">... или можно кликнуть на саму радиокнопку</label>
</div><!-- .wrapper -->
<div class="wrapper">
<input type="reset" value="Сбросить" />
</div><!-- .wrapper -->
</form>
CSS
* {
margin: 0;
padding: 0;
}
body {
padding: 50px 0 0;
font: 15px/17px Arial, sans-serif;
}
.wrapper {
width: 400px;
margin: 50px auto;
padding: 15px;
border: 1px dashed #CCC;
border-radius: 4px;
}
.checkbox {
vertical-align: top;
width: 17px;
height: 17px;
margin: 0 3px 0 0;
}
.checkbox + label {
cursor: pointer;
}
.checkbox:not(checked) {
position: absolute;
opacity: 0;
}
.checkbox:not(checked) + label {
position: relative;
padding: 0 0 0 60px;
}
.checkbox:not(checked) + label:before {
content: '';
position: absolute;
top: -4px;
left: 0;
width: 50px;
height: 26px;
border-radius: 13px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
.checkbox:not(checked) + label:after {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: all .2s;
}
.checkbox:checked + label:before {
background: #9FD468;
}
.checkbox:checked + label:after {
left: 26px;
}
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
.radio {
vertical-align: top;
width: 17px;
height: 17px;
margin: 0 3px 0 0;
}
.radio + label {
cursor: pointer;
}
.radio:not(checked) {
position: absolute;
opacity: 0;
}
.radio:not(checked) + label {
position: relative;
padding: 0 0 0 35px;
}
.radio:not(checked) + label:before {
content: '';
position: absolute;
top: -3px;
left: 0;
width: 22px;
height: 22px;
border: 1px solid #CDD1DA;
border-radius: 50%;
background: #FFF;
}
.radio:not(checked) + label:after {
content: '';
position: absolute;
top: 1px;
left: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #9FD468;
box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
opacity: 0;
transition: all .2s;
}
.radio:checked + label:after {
opacity: 1;
}
.radio:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
input[type='reset'] {
padding: 12px 15px;
border: none;
border-radius: 5px;
background: #CDD1DA;
color: #FFF;
cursor: pointer;
font-size: 15px;
}
input[type='reset']:active {
background: #BDC0CC;
}
input[type='reset']:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
