CSS로 체크박스 스타일 만들기

CSS로 기본적인 체크박스를 스타일링하는 방법을 설명드리겠습니다. HTML에서 <input type="checkbox"> 요소는 브라우저마다 기본 스타일이 다르기 때문에, 이를 커스터마이징하기 위해 appearance 속성을 사용하여 기본 스타일을 제거하고 CSS로 원하는 스타일을 적용할 수 있습니다.

체크박스 선택

<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    체크박스 선택
</label>

/* 체크박스 컨테이너 */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
}

/* 체크박스 숨기기 */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* 커스텀 체크박스 스타일 */
.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border: 2px solid #ccc;
    border-radius: 4px;
    position: relative;
    margin-right: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 체크 시 스타일 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

/* 체크된 상태의 체크 아이콘 */
.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 체크된 후 아이콘 표시 */
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
    display: block;
}

 

1. HTML 구조:
   • <label> 요소 내부에 <input type="checkbox">와 span.checkmark를 사용하여 체크박스와 그 외 스타일을 조정합니다. label을 사용하면 체크박스와 텍스트를 함께 클릭할 수 있습니다.
2. 체크박스 숨기기:
   • input[type="checkbox"] { display: none; }를 사용하여 기본 체크박스는 숨기고, 대신 CSS로 만든 커스텀 체크박스가 표시되도록 합니다.
3. 커스텀 체크박스:
   • checkmark 클래스로 체크박스의 모양을 스타일링합니다. 기본 배경색과 테두리 색상을 설정하고, 체크된 상태일 때 다른 색상으로 변경됩니다.
4. 체크 표시:
   • checkmark:after 가상 요소로 체크된 상태에서 표시될 체크 모양을 만듭니다. 체크 아이콘은 흰색으로 설정되고, rotate(45deg)를 사용하여 체크 모양이 45도 회전한 사선 모양이 됩니다.
5. 전환 효과:
   • transition 속성을 사용하여 배경색과 테두리 색상이 부드럽게 전환되도록 합니다.

이 코드를 통해 사용자 정의된 체크박스를 쉽게 구현할 수 있으며, 필요에 따라 크기나 색상을 변경하여 다양한 디자인을 적용할 수 있습니다.