CSS自定义样式复选框仅在iPad Safari中显示异常的修复求助

我为复选框实现了自定义样式：通过设置appearance: none隐藏原生复选框，使用相邻<span>元素模拟复选框外观及勾选状态。该方案在Firefox、Chrome、macOS Safari、Edge中显示正常，但在iPadOS 16.2的Safari浏览器里，勾选标记的color属性不生效，颜色继承了背景色，导致标记几乎无法辨认。

现有代码 #

CSS #

.container{
    width:300px;
    border:solid 1px lightgrey;
    padding:20px;
}
ul, li, label{
   width:100%;
}

li{
    list-style: none;
    padding:5px;
}
 
input[type=checkbox], input[type=checkbox]:checked{
   -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
}
input[type=checkbox] + span{
    height:16px;
    width:16px;
    border:solid 1px red;
    color:white;
}
input[type=checkbox]:checked + span{
    height:16px;
    width:16px;
    border:solid 1px #4b4b4b;
    background: #4b4b4b;
    color:#ff0000;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top:1px;
    padding-left:1px;
    font-size:0.75rem; 
}

HTML #

<div class="container">
    <ul>
        <li><label for="option1">Option 1<input id="option1" type=checkbox><span>&#10004</span></label></li>
        <li><label for="option2">Option 2<input id="option2" type=checkbox><span>&#10004</span></label></li>
        <li><label for="option3">Option 3<input id="option3" type=checkbox><span>&#10004</span></label></li>
        <li><label for="option4">Option 4<input id="option4" type=checkbox><span>&#10004</span></label></li>
        <li><label for="option5">Option 5<input id="option5" type=checkbox><span>&#10004</span></label></li>
    </ul>
</div>

显示效果对比 #

• 正常显示（Firefox/Chrome/macOS Safari/Edge）：
  

• iPad Safari异常显示：
  

解决方案 #

这是iPadOS Safari的渲染bug，可通过以下两种方式修复：

方法1：添加WebKit私有文本颜色属性 #

在勾选状态的<span>样式中，新增-webkit-text-fill-color属性强制设置文本颜色，绕过Safari对color属性的异常继承逻辑：

input[type=checkbox]:checked + span{
    /* 保留原有样式 */
    color:#ff0000;
    -webkit-text-fill-color: #ff0000; /* 新增该行 */
}

方法2：改用伪元素生成勾选标记 #

将HTML中的实体字符移到CSS伪元素中，避免实体字符受浏览器样式继承影响，同时简化结构：

修改后的HTML

<div class="container">
    <ul>
        <li><label for="option1">Option 1<input id="option1" type=checkbox><span></span></label></li>
        <li><label for="option2">Option 2<input id="option2" type=checkbox><span></span></label></li>
        <li><label for="option3">Option 3<input id="option3" type=checkbox><span></span></label></li>
        <li><label for="option4">Option 4<input id="option4" type=checkbox><span></span></label></li>
        <li><label for="option5">Option 5<input id="option5" type=checkbox><span></span></label></li>
    </ul>
</div>

修改后的CSS

input[type=checkbox]:checked + span::before{
    content: "\2714"; /* 对应&#10004的Unicode字符 */
    color:#ff0000;
}

内容的提问来源于stack exchange，提问作者stanley