This solution is generated by ChatGPT, correctness is not guaranteed. You might also be able to find a solution fromcommunity posts.
AI solution for CSS coding question on BFE.dev
6. different checkbox style
.my-checkbox input[type="checkbox"] { display: none; }
.my-checkbox span:before { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 5px; border: 1px solid gray; margin-right: 5px; }
.my-checkbox input[type="checkbox"]:checked + span:before { border-color: green; }