5

I am using below mentions css to show cutom radio buttons 

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 desktop browser it's working correctly and showing radio button asenter image description here

But in safari iOs its not displaying anything enter image description here

Any suggestions what could be possible cause ?

icanbeacoder
  • 1,388
  • 1
  • 13
  • 30
  • Hey, Have you found solution for your problem? I am having same issue right now and can't find why. Thanks. – alanbartczak Feb 10 '17 at 11:38
  • Nope, instead i used sprites and used background image with active class to mimic radio button like feature (toggle the state set the class and change background image) ;) – icanbeacoder Feb 10 '17 at 11:48
  • This might be because of a positioning issue. Try adding a position relative to your label, then position your before pseudo-element in absolute. And don't forget to put a display to it when there's the active class. – Pierre Burton Oct 18 '17 at 07:43

1 Answers1

0

It is because of the Unicode symbol you use as a content. It doesn't seem to appear on iOS. If you change to "Black Circle" instead it will work. (Just increase the font-size to compensate the size.)

Unicode Black Circle symbol

Similar issue

Yann
  • 423
  • 3
  • 15