체크박스 스타일 가이드

CSS로 HTML의 체크박스를 원하는 색상이나 크기, 동그라미, 체크 표시 모양 등 원하는 디자인으로 스타일하는 방법에 대해 알아보겠습니다.
CSS를 적용하면 나만의 스타일이 적용된 체크박스를 디자인할 수 있습니다.

HTML의 체크박스에 CSS 적용 시 고려할 점

HTML의 체크박스는 <input type="checkbox">로 표현됩니다.

HTML 
<p>체크되어 있지 않은 체크박스</p>
<input type="checkbox">
<hr>
<p>체크되어 있는 체크박스</p>
<input type="checkbox" checked>

checked는 체크박스가 기본적으로 체크되어 있는지 여부를 나타내는 속성입니다. 페이지가 처음 로드될 때 체크박스가 체크된 상태로 시작하려면 checked 속성을 사용합니다.

브라우저에서 실제 표시된 모습

브라우저에서 실제 표시된 모습의 체크박스는 일반적으로 일반적으로 정사각형이지만 모서리가 둥글게 되어 있을 수도 있습니다. 체크박스가 체크되어 있는 상태에서는 체크 아이콘 모양이 표시됩니다.

브라우저에서 제공하는 기본 모양의 스타일 지정 한계점

지금 보고 있는 HTML의 체크박스는 각 브라우저에서 제공하는 기본 모양이 있습니다.
이 기본 모양을 '네이티브 모양(native appearance)'이라고 합니다. 네이티브 모양은 브라우저마다 약간씩 다른 스타일로 제공하며, 체크박스가 체크되어 있는 상태처럼 CSS만으로는 완벽히 표현할 수 없는 모양과 느낌을 갖는 것도 있습니다.

크롬 브라우저에서 표현되는 체크박스
크롬 브라우저에서 표현되는 체크박스 캡쳐화면

"크롬 브라우저에서 표현되는 체크박스 캡쳐화면"을 기준으로 살펴보겠습니다. 체크박스의 배경 색상을 파란색에서 빨간색으로 바꾸려고 CSS의 background-color: red;를 적용하고 사각형의 모양을 동그라미 형태로 주기 위해서 border-radious 50%;를 적용하더라도 바뀌지 않습니다.

CSS 체크박스의 배경 색상과 사각형의 모양이 변경되지 않습니다. 
[type="checkbox"] {
    background-color: red;
    border-radius: 50%;
}

이와 같은 현상은 비단 "크롬 브라우저" 이외에도 "Safari 브라우저", 그 밖의 다른 브라우저에서도 마찬가지입니다.
이러한 현상이 생기는 이유는 HTML의 체크박스는 각 브라우저에서 제공하는 기본 모양이 있기 때문이며, 기본 모양을 일반적인 CSS 속성으로 제어할 때 일부 속성만을 사용할 수 있기 때문입니다.

width와 height 스타일 속성으로 크기를 지정할 수 있음

HTML의 체크박스는 브라우저에서 제공하는 기본 모양 중에서 기본적으로 동일한 값의 width와 height 속성으로 크기를 바꿀 수 있습니다.

CSS 
[type="checkbox"] {
    width: 50px;
    height: 50px;
}
브라우저에서 실제 표시된 모습
accent-color 스타일 속성으로 강조되는 색상을 지정할 수 있음

HTML의 체크박스는 브라우저에서 제공하는 기본 모양 중에서 accent-color 스타일 속성으로 '강조되는 색상'을 지정할 수 있습니다.

체크박스에서 '강조되는 색상'이란 체크박스가 체크된 상태일 때의 색상을 말합니다.

CSS 
[type="checkbox"] {
    width: 50px;
    height: 50px;
    accent-color: red;
}
브라우저에서 실제 표시된 모습

하지만, 이 경우에도 배경색처럼 보이는 빨간 색상은 원하는 색상으로 지정되지만 체크 아이콘 모양은 시각적으로 가독성과 대비를 보장하기 위해서 브라우저가 자동으로 색상을 지정합니다.

CSS 
[type="checkbox"] {
    width: 50px;
    height: 50px;
    accent-color: yellow;
}
브라우저에서 실제 표시된 모습 체크 아이콘 모양은 가독성과 대비를 보장하기 위해서 브라우저가 자동으로 색상을 지정합니다.

그렇다고 HTML의 체크박스는 브라우저에서 제공하는 기본 모양(네이티브 모양, native appearance) 중에서 크기와 강조되는 색상만을 커스텀으로 변경할 수 있다고는 생각하지 마세요. 체크박스를 커스텀 스타일링하는 방법에 대해 알아보겠습니니다.

체크박스를 커스텀 스타일링하는 방법

체크박스를 CSS로 커스텀 스타일링하는 방법이 있습니다. 다음의 두 가지 방법입니다.

  1. appearance: none; 속성으로 네이티브 모양을 제어하는 방법
  2. HTML의 체크박스를 화면에서 숨기고 대체 스타일 요소를 사용하는 방법

appearance: none; 속성으로 네이티브 모양을 제어하는 방법

체크박스에 appearance: none;으로 지정하면
기본 모양을 제공하고 있는 요소는 본래의 모양이 제거합니다. 대신 일반적인 CSS 규칙에 따라 렌더링됩니다. appearance 속성에 대한 자세한 설명은 CSS appearance 속성 - 브라우저에서 제공하는 기본 UI 요소 모양을 제어를 참고하세요.

다음은 체크박스에 appearance: none을 사용해서 사용자 정의 스타일하는 간단한 예제입니다.

실제 적용된 모습 미리보기
HTML 
<input type="checkbox" name="checkbox-test"> <!--체크되지 않은 체크박스 -->
<input type="checkbox" name="checkbox-test" checked> <!--체크되어 있는 상태의 체크박스 -->
CSS 
[type="checkbox"] {
    appearance: none; /* 기본(네이티브) 모양을 제거 */
    box-sizing: border-box;
    background-clip: content-box;
    padding: 0.25em;
    width: 1.5em;
    height: 1.5em;
    border: 1px solid gray;
    cursor: pointer;
}
[type="checkbox"]:checked {
    border-color: yellowgreen;
    background-color: yellowgreen;
}

[type="checkbox"]:checked는 CSS :checked 가상 클래스 선택자 사용 방법을 참고하세요!

HTML의 체크박스를 화면에서 숨기고 대체 스타일 요소를 사용하는 방법

appearance: none; 속성을 사용해서 본래의 모양이 제거하더라도 HTML의 체크박스 요소 하나에 스타일링하는 것은 디자인적인면에서 한계가 분명 있습니다.

HTML의 체크박스인 <input type="checkbox">는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
하위 콘텐츠를 가질 수 없는 빈 요소(Void element)는 CSS의 가상 요소 선택자인 ::before나 ::after를 사용할 수 없다는 한계점도 있습니다.

이러한 한계를 고려할 때 HTML의 체크박스를 화면에서 숨기고 대체 스타일 요소를 사용할 수 있습니다.

웹 접근성 주의!
HTML의 체크박스를 화면에서 숨기더라도 웹 접근성을 반드시 고려해야 합니다. 요소를 숨길 때 CSS의 display: none;이나 visibility: hidden; 등의 스타일 속성이나 요소에 HTML hidden 속성을 사용할 경우에는 스크린 리더를 사용하는 시각 장애인은 해당 요소에 접근할 수 없습니다.

다음은 HTML의 체크박스를 화면에서 숨기고 대체 스타일 요소를 사용해서 스타일하는 간단한 예제입니다.

실제 적용된 모습 미리보기 - 동그라미 체크박스
HTML 
<div class="control-container">
    <input type="checkbox" id="a" class="screen-reader">
    <div class="label-box">
        <span class="check-icon" aria-hidden="true"></span>
        <label for="a">체크되어 있지 않은 체크박스</label>
    </div>
</div>
<div class="control-container">
    <input type="checkbox" checked id="b" class="screen-reader">
    <div class="label-box">
        <span class="check-icon" aria-hidden="true"></span>
        <label for="b">체크되어 있는 체크박스</label>
    </div>
</div>

aria-hidden="true"는 스크린 리더 및 보조 기술을 사용하는 것으로, aria-hidden 속성의 값이 true로 설정되면 해당 요소와 그 안에 포함된 콘텐츠는 접근성 기술을 통해 감지되지 않습니다.

CSS 
.control-container {
    display: flex;
    position: relative;
}
.control-container + .control-container {
    margin-top: 0.7em;
}
.screen-reader { /* 스크린 리더를 고려해서 체크박스를 화면에서 숨김 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    margin: -1px;
    clip-path: inset(50%);
}
.label-box {
    position: relative;
}
.check-icon {
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid gray;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.check-icon::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 30%;
    height: 55%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-70%) rotateZ(40deg);
    border-right: 1.7px solid gray;
    border-bottom: 1.7px solid gray;
}
label {
    padding-left: 2.2em;
    position: relative;
    cursor: pointer;
}
[type="checkbox"]:checked + .label-box .check-icon {
    border-color:  yellowgreen;
    background-color: yellowgreen;
}
[type="checkbox"]:checked + .label-box .check-icon::before {
    border-color: #fff;
}

같이 보기