html - 自定义单选按钮在 iOs Safari 中不可见

Question

我正在使用下面提到的 css 来显示自定义单选按钮

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>

在桌面浏览器中，它工作正常，单选按钮显示为

但是在 safari iOs 中它不显示任何东西

有什么可能的建议吗？

Answer 1

这是因为您使用的 Unicode 符号作为内容。它似乎没有出现在 iOS 上。如果你改成“黑圈”，它就会起作用。 (只需增加字体大小来补偿大小。)

Unicode Black Circle symbol

Similar issue