After trying to customize checkbox styling, I found that they display correctly on most browsers except for Safari on iPad.
My approach involves removing the checkbox appearance and using a span element to simulate it with custom styling.
.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>✔</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>When viewed on Firefox, Chrome, Safari (macOS), and Edge, the checkboxes look like this:
https://i.sstatic.net/9Hp7l.png
The appearance differs on Safari for iPad:
https://i.sstatic.net/UwdkK.png
In iPadOS version 16.2, the color property doesn't apply to the checkboxes. The tick symbol inherits the background color instead. Is there any way to resolve this issue?