带有 CSS 的自定义样式复选框仅在 iPad 上的 Safari 中显示不同

Question

当我尝试将自定义样式应用于复选框时，它们在我测试过的所有浏览器上都能正确显示，除了 ipad 上的 Safari。

我使用的方法是使复选框外观为无，然后将样式应用于跨度以模仿复选框。

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>

CSS 是：

    .container{
        width:50%;
        border:solid 1px lightgrey;
        padding:20px;
    }
    ul, li, label{
        width:100%;
    }
    li{
        list-style: none;
        padding:5px;
    }
    label{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    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; 
    }

firefox/chrome/safari (macOS)/edge 上的结果如下：

ipad 上的 safari 结果：

在 ipad 上，颜色属性不适用于复选框。刻度符号采用背景属性的颜色。怎么可能解决这个问题？