big radio button

by Alexandr Zawgorodniy

HTML

<input type="radio" name="rad" id="radio1" checked/>
<input type="radio" name="rad" id="radio2"/>
<input type="radio" name="rad" id="radio3"/>
<input type="radio" name="rad" id="radio4"/>


<label for="radio1" class="label1">XS</label>
<label for="radio2" class="label2">S</label>
<label for="radio3" class="label3">M</label>
<label for="radio4" class="label4">L</label>

CSS

input{
  display:none;
}
label{width: 40px;height: 40px;background: #fff;
float:left;
text-align:center;
margin-right:10px;
line-height:40px;
border-radius:50%;
border:1px solid black;
}
#radio1:checked ~ .label1, #radio2:checked ~ .label2,
#radio3:checked ~ .label3 , #radio4:checked ~ .label4
{
  background:#000;
  color:#fff;
}