CSS를 사용하여 체크박스 스타일을 지정하는 방법

<div>
  <input id="first_name" type="checkbox" checked="checked">
  <label for="first_name">First Name</label>
</div>

브라우저의 기본 확인란 숨기기

input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

맞춤 체크박스 만들기

label {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
}
label:before {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 0;
  display: block;
  height: 20px;
  width: 20px;
  background-color: #50CDBE;
  border-radius: 3px;
}

마우스 오버 시 10% 배경색에 어둡게 추가

label:hover:before {
  background-color: #1AE6E6;
}

체크 표시/표시기 스타일 지정

label:after {
  content: '';
  position: absolute;
  left: 7px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #333;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
}

선택하면 확인 표시를 표시하거나 숨깁니다.

input:checked + label:after {
  opacity: 1;
}