Custom styling checkboxes with CSS appears different in Safari on ipad only

Question

When I try to apply custom styling to checkboxes, they appear correctly on all browsers that I have tested except Safari on ipad.

I am using the method of giving the checkbox the appearance of none, and then applying styling to a span to mimic the checkbox.

.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; 
        }

       <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>

The result on firefox/chrome/safari (macOS)/edge looks like:

The result on safari on ipad:

On ipadOS version 16.2, the color property is not applied to checkbox. The tick symbol takes the color of the background property. How is it possible to fix this?

Answer 1

The character you have chosen appears to be a dingbat.

It seems that IOS Safari does not apply the relevant CSS to this unless it is explicitly 'told' that it is a dingbat.

This snippet is the code given in the question but with the second span explicitly setting the font-family to a dingbat one. The tick is then styled at least on IOS 15.6.1 on my iPad.

    .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; 
    }

    <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 style="font-family: 'Zapf Dingbats';">&#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>

Note the hint for this was found at HTML unicode arrow works on Safari desktop, but not Safari for iOS which was talking about a specific arrow character but the problem seems to be equivalent.