The default checkbox style might not be what you want for most of the time, in this problem you are asked to create a different checkbox style. 1. whe…

7. a row

5. modal with max height

6. different checkbox style

Most solutions proposed here are either:
<ol>
<li>using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance">unreliable appearance property</a>, or</li>
<li>hiding the native input element completely from DOM tree with display:none or visibility:hidden (<a href="https://webaim.org/techniques/css/invisiblecontent/">It reduces a11y support for visually impaired users who rely on keyboard and audio</a>)</li>
</ol>
Here is the common practice to override native element without losing a11y support, reliably across browsers. Feel free to ask me any questions.
All credits go to Aditya Bhandari, I stumbled upon <a href="https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3">his excellent article</a> while learning about this challenge.
<pre class="shiki github-dark shaku"><code>/* your code here */.my-checkbox { position: relative;}.my-checkbox input { /* refer to https://webaim.org/techniques/css/invisiblecontent/ */ position: absolute; left: -99999px;}.my-checkbox span::before { background-color: gray; content: ''; /* "content" prop has to be set to render something */ display: inline-block; /* circle with radius 5px */ border-radius: 50%; height: 10px; width: 10px;}.my-checkbox input:checked + span::before { background-color: green;}</code></pre>