My code for custom radio buttons using CSS is as follows:
input[type=radio]{
display:none;
}
.radio-options label::before {
content: "\2b24";
color:#e2e2e2;
display: inline-block !important;
width: 17px;
height: 17px;
vertical-align:middle;
margin-right: 8px;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
padding-top: 1.8px;
line-height: 10px;
cursor: pointer;
}
.radio-options label.active-radio::before {
content: "\2b24";
color: #f9b410;
background-color: #fff;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
margin-left: 0px;
padding-top: 1.8px;
line-height: 10px;
}
<div class="radio-options">
<div class="col-md-6 col-xs-6">
<input id="some_thing" type="radio" >
<label ng-class="{'active-radio':true}">Something</label >
</div>
</div>
On desktop browsers, the radio button displays correctly, like this: https://i.sstatic.net/iniZa.png
However, on Safari iOS, nothing is displayed as shown in this image: https://i.sstatic.net/SLFoh.png
Any suggestions on what might be causing this issue?