[CSS] 체크박스를 활용한 ON/OFF 버튼 만들기

인접 형제 선택자('+')를 활용하여 체크박스 뒤에 오는 <label>에 스타일을 적용하는 방법이다. 체크박스의 checked 상태에 따라 스타일을 다르게 지정하면, 손쉽게 ON/OFF 버튼을 만들 수 있다. 이 방법은 라디오 버튼에도 적용이 가능하다.

See the Pen yJxqAK by 소지훈 (@sogoonii) on CodePen.

<style>
input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

label {
    display: block;
    position: absolute;
    width: 60px;
    height: 34px;
    border-radius: 17px;
    background-color: #ddd;
    transition-duration: 0.2s;
}

label span {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    transition-duration: 0.2s;
}

label:before,
label:after{
    position: absolute;
    top: 0;
    width: 34px;
    font-size: 11px;
    line-height: 34px;
    color: #fff;
    text-align: center;
}

label:before {
    left: 0;
    content: 'ON';
}

label:after {
    right: 0;
    content: 'OFF';
}

input:checked + label {
    background-color: #00c73c;
}

input:checked + label span {
    transform: translateX(26px);
}
</style>

<input type="checkbox" id="checkbox" checked>
<label for="checkbox"><span></span></label>