Custom switch not showing in iOS Safari

Question

Below I mention css for displaying cutom switches.

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> 

In a desktop browser, it works correctly and shows the radio button as

But nothing is displayed in safari iOs

Any suggestions that might be possible?

Answer 1

This is because of the Unicode character that you use as content. It doesn't seem to appear on iOS. If you go to the Black Circle, it will work. (Just increase the font size to compensate for the size.)

Unicode Black Circle Symbol

Similar problem