7강 - 커스텀 체크박스

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"> -->

<div class="custom_checkbox_1">
    <input type="checkbox">
    <span></span>
</div>

body {
    margin: 0;
}
.custom_checkbox_1 {
    display: inline-block;
    border: 3px solid black;
    position : relative;
    width: 20px;
    height: 20px;
    border-radius : 10px;
    overflow :hidden;
}
.custom_checkbox_1 > input[type="checkbox"] {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border-radius : 0;
    opacity : 0;
}
.custom_checkbox_1 > input[type="checkbox"] + span::after {
    content : '';
    position : absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    pointer-events : none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-sizing: border-box;
}



.custom_checkbox_1 > input[type="checkbox"]:focus + span::after {
    border: 2px dotted black;
}
.custom_checkbox_1 > input[type="checkbox"]:checked + span::after {
    content : "∨"
}

✅ / span 한테는 클릭이벤트가 적용되지 않는다 /
✅ / checked를 통해 span 태그가 먹히고 , 커스텀 할 수 있다.
focus 하면 기능 실행 /

💨 코드펜으로 완성된 코드 한번에 보러가기