Радиокнопки

by Kate Mokhova

HTML

<div style="width: 500px;">
	
    <label for="light1">
        <input type="radio" name="light" id="light1" class="custom_radio"></input>
        <span class="custom_radio_label">Чекбокс адын</span>
    </label>
    <label for="light2">
        <input type="radio" name="light" id="light2" class="custom_radio"></input>
        <span class="custom_radio_label">Чекбокс два</span>
    </label>
</div>

CSS

body
{
	padding: 100px;
	font-family: Helvetica;
	font-size: 16px;
    color: #454545;
    background-color: #fff;
}

div {position: relative;}
label
{
    display: block;
    margin: 20px 50px 0px 0px;
    font-size: 16px;
}

label {color: #b7b7b7;}
label:hover{color: #404040;}

span {position: relative;}
.custom_radio {display:none;}


.custom_radio_label:before
{
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    content: "";
    border-radius: 50%;
    border: 2px solid #E8E8E8;
}

.custom_radio_label:after
{
    position: absolute;
    top: 0px;
    left: 4px;
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    content: "";
    opacity: 0;
}

span.custom_radio_label:hover:after
{
  transition: all .1s ease-out;
  opacity: 1;
  background: url("https://img-fotki.yandex.ru/get/15534/54602231.1/0_c6173_62ea4932_L") 0 0 no-repeat;
}

input:checked: ~ span
{color: #404040;}

input:checked ~ .custom_radio_label:before 
{
  opacity: 0;
}

input:checked:hover ~ .custom_radio_label:before 
{
  opacity: 1;
}

input:checked ~ .custom_radio_label:after
{
  transition: all .3s ease-out;
  opacity: 1;
  background: url("https://img-fotki.yandex.ru/get/15527/54602231.1/0_c6172_2869361_L") 0 0 no-repeat;
}