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

Posted 2023-03-05

【中文标题】自定义单选按钮在 iOS Safari 中不可见

【英文标题】：Custom radio button not visible in iOs Safari

【发布时间】：2017-02-09 18:46:26

【问题描述】：

我使用下面提到的 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 中它没有显示任何内容

任何建议可能是什么原因？

【问题讨论】：

嘿，您找到解决问题的方法了吗？我现在有同样的问题，找不到原因。谢谢。

不，我使用精灵并使用带有活动类的背景图像来模仿单选按钮之类的功能（切换状态设置类并更改背景图像）;)

这可能是因为定位问题。尝试添加相对于标签的位置，然后将之前的伪元素置于绝对位置。并且不要忘记在有活动的课程时显示它。

【参考方案1】：

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

Unicode Black Circle symbol

Similar issue