[CSS] input checkbox 스타일 적용하기

To-do 웹사이트를 만들던 중, To-do를 체크하여 완료처리하는 것을 구현했다. 그 과정에서 input type이 checkbox인 것은 css로 스타일을 조정하기가 어렵다는 것을 알게 됐다. 크롬 브라우저로 봤을 때 width와 height는 조정이 가능했으나, border-radius와 background-color는 스타일 설정한 것이 반영되지 않았다. 찾아보니 input은 숨김처리하고, label 요소를 스타일링 해주는 것이 많이 사용하는 방법 같았다. 이대로 적용해 보았다.

🐾 input과 label 요소 생성

// js

const checkInput = document.createElement('input');
checkInput.id = `checkbox-${liEl.id}`;
checkInput.className = 'checkbox';
checkInput.type = 'checkbox';
const checkLabel = document.createElement('Label');
checkLabel.htmlFor = `checkbox-${liEl.id}`;

동적으로 요소를 생성해준다.

🐾 CSS 스타일 조정

/* css */

.checkbox {
  display: none;
}

체크박스는 숨김처리 해준다.

/* css */

label {
  min-width: 12px;
  min-height: 12px;
  margin-right: 20px;
  border: 2px inset #fff;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

대신 라벨을 클릭하면 체크박스의 상태가 달라지는 점을 이용하여, 라벨을 통해 체크하기 전의 스타일을 설정한다.

/* css */

.checkbox:checked + label::before {
  position: absolute;
  top: 2px;
  left: 2px;

  content: ' ';
  min-width: 4px;
  min-height: 4px;
  border-radius: 50%;
  background-color: #000;
}

체크한 뒤의 스타일은 위와 같이 조정했다. 먼저 :checked 가상클래스선택자를 통해 '체크 된 상태'일 때를 선택한다. 그리고 체크 하기 전의 라벨 위에 새로운 요소를 얹는 느낌으로, ::before 가상요소선택자를 사용하여 가상요소를 만들어, 체크 된 상태를 보여준다.

🐾 스타일 적용된 모습