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

我使用下面提到的css来显示cutom单选按钮

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>

输入[类型=收音机]{
显示：无；
}
.收音机选项标签：：之前{
内容：“\2b24”；
颜色：#E2；
显示：内联块！重要；
宽度：17px；
高度：17px；
垂直对齐：中间对齐；
右边距：8px；
背景色：#fff；
边框：1px实心#e2；
边界半径：8px；
字体大小：9px；
文本对齐：居中；
文本阴影：0px 0px 3px#fff；
字体系列：monospace；
垫面：1.8px；
线高：10px；
光标：指针；
}
.收音机选项标签.活动收音机：：之前{
内容：“\2b24”；
颜色：#f9b410；
背景色：#fff；
字体大小：9px；
文本对齐：居中；
文本阴影：0px 0px 3px#fff；
字体系列：monospace；
左边距：0px；
垫面：1.8px；
线高：10px；
}
某物

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

但在safari iOs中，它不显示任何内容

---

有什么可能的原因吗？

这是因为您将Unicode符号用作内容。它似乎没有出现在iOS上。如果你改为“黑圈”，它会工作。（只需增加字体大小以补偿大小。）

---

嘿，你找到解决问题的方法了吗？我现在也有同样的问题，不知道为什么。谢谢。不，我用精灵和背景图像来模拟单选按钮功能（切换状态设置类并更改背景图像）；）这可能是因为定位问题。尝试添加一个相对于标签的位置，然后将伪元素置于绝对位置。当有活动类时，不要忘了给它显示。