체크박스 꾸미는 방법

체크박스 꾸미는 방법

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

체크박스 만들기

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

라벨 꾸미기

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

체크박스 숨기기

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

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

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.