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; }