SCSS로 체크모양이 있는 체크박스 그리기

김예희·2023년 8월 15일
0
.input-check {
	& + .label .label-icon {
    	border-radius: 3px;
    }
    &:checked + .label {
    	.price {
        font-weight: 600;
        color: $point-color;
        }
        .label-icon {
        	position: relative;
        	border-color: $green;
            background-color: $green;
            //여기까지는 버튼의 모양, 색깔, label 디자인 등이 담겨있다//
            &::before {
            	content: '';
                position: absolute;
                top: 6px;
                right: 6px;
                width: 14px;
                height: 9px;
                border: 2px solid #fff;
                border-width: 0 0 2px 2px;
                transform: rotate(-45deg);

마지막 부분인 &::before { }가 버튼안의 하얀색 체크표시를 만들게 된다.

0개의 댓글