CSS를 사용하여 확인란 스타일 지정

이 튜토리얼에서는 CSS에서 체크 박스의 스타일을 지정하는 방법을 소개합니다.

CSS를 사용하여 확인란 스타일 지정

체크박스는 사용자로부터 입력을 받는 HTML 요소로 거의 모든 웹사이트에서 사용됩니다. 브라우저에서 제공하는 기본 확인란은 다른 모든 사이트에서 동일하게 표시되므로 스타일을 지정하지 않는 이유는 무엇입니까? :before, :after, :hover, :checked와 같은 유사 요소를 사용하여 스타일을 지정하는 것은 약간 복잡하지만 CSS를 사용하여 확인란의 스타일을 지정할 수 있습니다.

체크박스에 스타일을 적용하기 위해 추가 라이브러리 없이 HTML과 CSS만 사용할 것입니다. 이 방법은 최신 브라우저에서 잘 작동합니다. 체크박스의 스타일을 지정하는 방법에는 여러 가지가 있을 수 있습니다. 우리는 목표를 달성하기 위해 다음과 같은 간단한 원칙을 따를 수 있습니다. 브라우저에 의해 스타일이 지정되고 CSS를 사용하여 의미 있는 방식으로 재정의할 수 없는 기본 체크박스 컨트롤을 숨길 수 있습니다. 컨트롤이 숨겨진 상태에서도 여전히 체크 상태를 감지하고 토글해야 합니다. 새 요소의 스타일을 지정하여 확인란의 선택 상태를 반영할 수 있습니다.

위의 원칙은 다양한 방법을 사용하여 적용될 수 있으며 단일 접근 방식이 옳고 그름은 없습니다. 이 튜토리얼에서는 먼저 div 요소에서 확인란을 래핑합니다. 이는 체크박스 컨트롤이 숨겨져 있어도 div 안의 아무 곳이나 클릭하여 체크된 상태를 토글할 수 있음을 의미합니다. 그런 다음 확인란을 숨기고 확인란 뒤에 새 요소를 추가하면 그에 따라 스타일을 지정할 수 있습니다. 요소는 :checked 상태에 따라 선택되고 스타일이 지정될 확인란 뒤에 나타나야 합니다. CSS의 의사 클래스는 요소에 특정 상태를 정의하는 특정 요소의 스타일을 지정하는 데 사용됩니다. 여기에서는 의사 요소를 사용하고 있습니다. :before 선택기는 선택한 각 요소의 내용 앞에 무언가를 삽입합니다. :checked 선택기는 선택된 모든 <input> 요소와 일치합니다.

HTML에서 확인란은 <label> 태그 내에 있습니다. <span> 요소의 주요 기능은 나중에 CSS에서 확인란을 참조하는 것입니다.

CSS에서 display 속성은 요소의 표시 동작(렌더링 상자 유형)을 지정합니다. 우리의 경우 none으로 설정되어 <label> 태그 내의 <input> 요소, 즉 기본 확인란을 완전히 제거합니다. height, width 및 border 속성을 사용하여 사용자 지정 확인란을 생성했습니다. CSS height 및 width 속성은 요소의 높이와 너비를 설정합니다. border CSS 속성을 사용하면 요소 테두리의 스타일, 너비 및 색상을 지정할 수 있습니다. display 속성은 표시 동작을 지정합니다. 인라인 값은 요소를 인라인으로 표시합니다. position 속성은 요소가 새 확인란을 설정하는 데 사용되는 위치 유형을 지정합니다.

:before 의사 요소는 <span> 요소 앞에 콘텐츠를 삽입하는 데 사용됩니다. :checked 선택기는 체크된 모든 요소와 일치합니다. 즉, 확인란이 선택되면 :before 선택기를 사용하기 때문에 <span> 요소 앞에 새 내용이 주입됩니다. 이들은 유니코드 아이콘을 삽입할 수 있는 content 속성을 지원합니다. CSS 속성 content:'\2714'의 값은 체크 표시 아이콘을 나타냅니다.

예제 코드:

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}