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?

What version of IOS are you using? And is the result the same on an iPhone? If you make your code into a runnable snippet I could try that. See https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Apr 26 '23 at 05:38
I don't think it's the version of IOS, it's the type of character you are using (try putting in an 'ordinary' character like X instead of the tick, that will get styled OK on IOS). I've put up an answer which seems to work. — A Haworth, Apr 26 '23 at 06:29

A Haworth · Accepted Answer · 2023-04-26T06:23:08.100

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.

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

1 Answers1