【初心者向け】CSSでcheckboxのデザインを変えるやり方

<label>
<input type="checkbox" name="test" value="man">
男性
</label>
<label>
<input type="checkbox" name="test" value="woman">
女性
</label>

<label class="my-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
男性
</label>

.my-checkbox {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;/* チェックボックスにカーソルを合わせるとポインタになる設定 */
}

/* inputは表示しないようにする */
.my-checkbox input {
display: none;
}

/*checkboxの設定 */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px; /* checkboxの大きさ */
width: 25px; /* checkboxの大きさ */
border: solid 2px #66cdaa; /* 囲い線の色 */
border-radius: 3px;
}
/* チェックマークの設定 */
.checkmark:after {
content: "";
position: absolute;
left: 5px; /* チェックマークの位置 */
top: 1px; /* チェックマークの位置 */
width: 5px; /* チェックマークの大きさ */
height: 8px; /* チェックの大きさ */
border: solid #FFF;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
}

/* チェックを入れたときのcheckboxの設定 */
.my-checkbox input:checked + .checkmark {
background: #66cdaa; /* チェックを入れた時の色 */
border-color: #66cdaa; /* チェックを入れた時の色 */
}

/* チェックを入れたときのチェックマークの設定 */
.my-checkbox input:checked + .checkmark:after {
opacity: 1;
}