[웹디자인] 체크박스 스타일

html

<input id="checkbox" type="checkbox">
<label for="checkbox">밥먹기</label>

css

input[type='checkbox'] {
  position: absolute;
  clip: rect(0, 0, 0, 0); /* 화면에 보여줄 영역 선택->숨기는 효과 */
}
input[type='checkbox'] + label::before {
  /* 사용할 체크박스 스타일*/
  content: '\a0'; /* 이스케이프 시퀀스 공백 */
  display: inline-block;
  width: 1em;
  height: 1em;
  color: white;
  background-color: white;
  border: 1px solid teal;
  border-radius: 0.2em;
  margin: 0.1em;
}

input[type='checkbox']:checked + label::before {
  content: '\2714'; /* 이스케이프 시퀀스 체크무늬 */
  background-color: teal;
  text-indent: 0.1em;
}

• 원래 체크박스를 숨긴다(clip속성 사용)
• 새로운 네모칸을 만든다(가상요소 ::before사용)
• 체크시 네모칸 모양 변경

escape sequence(이스케이프 시퀀스)
컴퓨터 언어에서 사용하는 여러 기호들에 코드를 부여한 것

유노코딩