체크박스 꾸미는 방법

체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을
만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면
체크가 해제되는 성질을 이용합니다.

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="290"
data-pen-title="CSS 체크박스 꾸미는 방법 예제1"
data-slug-hash="ExyYeZp"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 290px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

체크박스 만들기

빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨의 id
속성을 연결시켜야 합니다.

<input type="checkbox" id="cbtest">
<label for="cbtest"></label>

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="CSS 체크박스 꾸미는 방법 예제2"
data-slug-hash="ZEOzMro"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

라벨 꾸미기

라벨을 원하는 모양으로 꾸밉니다.

label {
  width: 50px;
  height: 50px;
  border: 5px solid #000000;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="CSS 체크박스 꾸미는 방법 예제3"
data-slug-hash="vYKBVaJ"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

라벨을 클릭했을 때의 스타일을 꾸밉니다.

input[type="checkbox"]:checked + label {
  border-color: green;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="460"
data-pen-title="CSS 체크박스 꾸미는 방법 예제4"
data-slug-hash="qBNWQox"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 460px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

체크박스 숨기기

체크박스를 보이지 않게 합니다.

input[type="checkbox"] {
  display: none;
}

class="codepen"
data-default-tab="result"
data-editable="true"
data-height="441"
data-pen-title="CSS 체크박스 꾸미는 방법 예제5"
data-slug-hash="pobzqGL"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

체크박스 꾸미는 방법

체크박스 꾸미는 방법