[CSS] input type=checkbox customize

아래와 같이 작성된 input type=checkbox 를 커스터마이징 해야했다.

<li className="list-item">
    <input
        className="checkbox"
        type="checkbox"
        name="worker"
        onChange={onCheckChange}
        checked={showItem.worker}
        id="worker-check"
    />
    <label>작업자</label>
</li>

input 의 checkbox 속성을 가지고 있는 태그는 css만으로 수정이 어렵다.

그래서 아래와 같이 라벨을 추가해서 input과 이어주고,

기존 input을 안보이게 처리했다.

체크 표기도 css로 만들어 주었다.

 /* check box custom style */
    .checkbox {
        display: none;
    }
    .checkbox-label {
        width: 12px;
        height: 12px;
        border: 1px solid #d8d8d8;
        border-radius: 2px;
        margin-top: -2px;
        cursor: pointer;
    }
    .checkbox:checked + .checkbox-label {
        display: flex;
        justify-content: center;
        align-items: center;
        .check-mark {
            margin-top: -2px;
            width: 5px;
            height: 8px;
            border-bottom: 2px solid #d8d8d8;
            border-right: 2px solid #d8d8d8;
            transform: rotate(45deg);
        }
    }

<li className="list-item">
    <input
        className="checkbox"
        type="checkbox"
        name="worker"
        onChange={onCheckChange}
        checked={showItem.worker}
        id="worker-check"
    />
    <label
        className="checkbox-label"
        htmlFor="worker-check"
    >
        <div className="check-mark" />
    </label>
    <label>작업자</label>
</li>

결과 짜잔.