Custom radio button
by Sreekesh S K
HTML
<div class="radioMargin">
<input ng-model="D2C.HealthDetails.isSmoker" type="radio" class="custRadio_smoke" required name="isSmoker" value="Yes" id="1"/><label for="1" translate="nlg.yes">s</label>
<input ng-model="D2C.HealthDetails.isSmoker" type="radio" class="custRadio_smoke" required name="isSmoker" value="No" id="2"/><label for="2" translate="nlg.no">1</label>
</div>
CSS
input.custRadio_smoke[type=radio] {
display:none;
}
input.custRadio_smoke[type=radio] + label{
display: inline-block;
background-color: #c8e3ed;
cursor: pointer;
margin: 0px 10px;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
color: #044f6e;
font-weight: bold;
}
input.custRadio_smoke[type=radio]:checked + label{
background-color: #41ad48;
color:#fff;
}