input[type=checkbox] {
vertical-align: top;
margin: 0 3px 0 0;
width: 17px;
height: 17px;
}

input[type=checkbox] + label {
cursor: pointer;
}

input[type=checkbox]:not(checked) {
position: absolute;
opacity: 0;
}
input[type=checkbox]:not(checked) + label {
position: relative; /* будем позиционировать псевдочекбокс относительно label */
padding: 0 0 0 50px; /* оставляем слева от label место под псевдочекбокс */
}

input[type=checkbox]:not(checked) + label:before {
content: '';
position: absolute;
top: -2px;
left: 0;
width: 40px;
height: 20px;
border-radius: 10px;
background: #CDD1DA;
box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

input[type=checkbox]:not(checked) + label:after {
content: '';
position: absolute;
top: -1px;
left: 2px;
width: 18px;
height: 18px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}

input[type=checkbox]:checked + label:before {
background: #567ca4;
}

input[type=checkbox]:checked + label:after {
left: 20px;
}

input [type=radio]{vertical-align: top;width: 15px;height: 15px;margin: 0 3px 0 0;}
input [type=radio]+ label {cursor: pointer;}
input[type=radio]:not(checked) {position: absolute;opacity: 0;}
input[type=radio]:not(checked) + label {position: relative;padding: 0 0 0 35px;}
input[type=radio]:not(checked) + label:before {cursor: pointer; content: '';position: absolute;top: -1px;left: 0;width: 18px;height: 18px;border: 1px solid #CDD1DA;border-radius: 50%;background: #FFF;}
input[type=radio]:not(checked) + label:after {cursor: pointer; content: '';position: absolute;top: 3px;left: 4px;width: 12px;height: 12px;border-radius: 50%;background: #567ca4;box-shadow: inset 0 1px 1px rgba(0,0,0,.5);opacity: 0;transition: all .2s;}
input[type=radio]:checked + label:after {opacity: 1;}