checkbox를 css만을 이용해서 디자인틱 하게 꾸미는 방법

html

<p class="p-privacy">
	<input id="privacy" type="checkbox" class="checkbox-privacy">
	<label for="privacy">사이트 개인벙보 보호정책에 동의합니다.</label>
</p>

scss

input[type="checkbox"] {
    &:checked, &:not(:checked) {
        & + label {
            position: relative;
            display: inline-block;
            padding-left: 22px;
            cursor: pointer;
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 3px;
                width: 18px;
                height: 18px;
                border: 2px solid shade($color__light-gray, 20%);
                background-color: $color__white;
            }
            &::after {
                content: '\e804';
                position: absolute;
                font-family: $font__fontello;
                font-size: 12px;
                line-height: 12px;
                color: $color__red;
                top: 6px;
                left: 4px;
                @include transition(all 0.1s ease);
            }
        }
    }
    &:checked {
        & + label {
            &::after {
                opacity: 1;
                @include transform(scale(1));
            }
        }
    }
    &:not(:checked) {
        & + label {
            &::after {
                opacity: 0;
                @include transform(scale(0.8));
            }
        }
    }
}