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

<pre class="shiki github-dark shaku"><code>/* your code here *//* solution 1 pseudo-element *//*.my-checkbox input{ display: none;}.my-checkbox span::before{ content: ""; display: inline-block; background-color: gray; border: 1px solid gray; border-radius: 50%; width: 8px; height: 8px;}.my-checkbox input:checked ~span::before{ background-color: green; border: 1px solid green;}*//* solution 2 appearance */.my-checkbox { display: flex; align-items: center;}.my-checkbox input[type="checkbox"] { appearance: none; background-color: gray; width: 10px; height: 10px; border-radius: 50%;}.my-checkbox input[type="checkbox"]:checked { background-color: green;}</code></pre>