커스텀 체크박스 만들기

체크박스는 여러 선택지를 다중으로 선택할 수 있는 인터페이스입니다. 

 

체크 박스 예시

 

좋아하는 음식

돈까스

제육볶음

상하이 디럭스

 

1. 체크박스 위치와 나열 방법

체크박스를 세로로 길게 나열하고, margin-bottom 속성으로 간격을 조정합니다.

/* 체크박스 컨테이너 스타일 */
.checkbox-container {
    margin-bottom: 15px; /* 체크박스 간의 간격 조정 */
}

/* 커스텀 체크박스 스타일 */
.custom-checkbox {
    position: relative; /* 자식 요소의 위치를 부모 요소에 상대적으로 설정 */
    padding-left: 35px; /* 체크박스와 텍스트 사이의 왼쪽 여백 */
    cursor: pointer; /* 마우스를 올렸을 때 포인터 커서로 변경 */
    font-size: 22px; /* 텍스트 크기 설정 */
    user-select: none; /* 사용자가 텍스트를 선택할 수 없도록 설정 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}

.custom-checkbox input {
    position: absolute; /* 체크박스를 절대 위치로 설정 */
    opacity: 0; /* 체크박스를 투명하게 만들어 숨김 */
    cursor: pointer; /* 마우스를 올렸을 때 포인터 커서로 변경 */
    height: 0; /* 높이를 0으로 설정 */
    width: 0; /* 너비를 0으로 설정 */
}

 

만약에 가로로 나열하고 싶으면 display를 inline-block으로 지정하고, 오른쪽 간격을 조정하면 됩니다.

/* 체크박스 컨테이너 스타일 */
.checkbox-container {
	display: inline-block; /* 가로로 나열하기 위해 인라인 블록 설정 */
    margin-right: 15px; /* 오른쪽 간격 설정 */
        }

 

 

 

 

2. 체크박스와 기호 스타일 지정

체크박스를 클릭한 후에 체크 기호가 나타나도록 input과 after 속성을 추가합니다.

.custom-checkbox .checkmark {
    position: absolute; /* 체크박스를 절대 위치로 설정 */
    top: 0; /* 부모 요소의 상단에 위치 */
    left: 0; /* 부모 요소의 왼쪽에 위치 */
    height: 25px; /* 체크박스의 높이 설정 */
    width: 25px; /* 체크박스의 너비 설정 */
    background-color: #eee; /* 체크박스의 배경색 설정 */
    border: 2px solid #ddd; /* 체크박스의 테두리 색과 두께 설정 */
    border-radius: 4px; /* 체크박스 모서리를 둥글게 설정 */
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #5ab2ff; /* 체크박스가 체크되었을 때 배경색 설정 */
    border-color: #5ab2ff; /* 체크박스가 체크되었을 때 테두리 색 설정 */
}

.custom-checkbox .checkmark:after {
    content: ""; /* 체크 표시를 추가하기 위한 빈 내용 설정 */
    position: absolute; /* 체크 표시의 위치를 절대 위치로 설정 */
    display: none; /* 기본적으로 체크 표시를 숨김 */
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block; /* 체크박스가 체크되었을 때 체크 표시를 보이도록 설정 */
}

.custom-checkbox .checkmark:after {
    left: 9px; /* 체크 표시의 왼쪽 위치 설정 */
    top: 5px; /* 체크 표시의 상단 위치 설정 */
    width: 5px; /* 체크 표시의 너비 설정 */
    height: 10px; /* 체크 표시의 높이 설정 */
    border: solid white; /* 체크 표시의 테두리 색과 스타일 설정 */
    border-width: 0 3px 3px 0; /* 체크 표시의 테두리 두께 설정 */
    transform: rotate(45deg); /* 체크 표시를 45도 회전하여 체크 모양으로 설정 */
}