CSS 커스텀 체크박스

 

 

javascript 없이 css로만 커스텀 체크박스

 

 

 

custom checkbox html

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

 

 

custom checkbox css

[type="checkbox"],
[type="checkbox"]:not(:checked) { /* input 태그 none 처리 */
  display: none;
}
[type="checkbox"] + label {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  background-color: #fff;
  border: 2px solid steelblue;
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
}
[type="checkbox"]:checked + label { /* checked 일 때 label 모양 변경 */
  position: relative;
  border: none;
  background-color: steelblue;
}
[type="checkbox"]:checked + label::after { /* checked 일 때 가상 선택자로 체크 모양 만들기 */
  content: '';
  position: absolute;
  top: 20%;
  left: 18%;
  width: 14px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

인접 선택자(+)를 사용했기 때문에 html 태그 위치 주의하기

[type="checkbox"] + label = 타입이 체크박스인 태그 바로 뒤에오는 label 태그 선택

 

 

 

 

결과

custom checkbox