checkbox 커스텀으로 만들기

위의 사진과 같이 체크박스를 css를 이용해서 커스텀으로 만들어 보자.

/*기본적인 checkbox 디자인 만들기, 박스부분 원래 디자인 없애기*/
input[type="checkbox"] {
  margin: 0px;
  padding: 0px;
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  width: 24px;
  background-color: #d5d5d5;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* after를 이용해서 checkbox 이후에 오는 내용을 추가할 수 있다!
즉, 체크박스 내의 체크 모양 디자인을 하는 부분.
content 안의 내용은 fontawesome에서 가져온 체크 모양 아이콘.
기본적으로, 체크하기 이전의 모습이라 display:none을 해준다.
.*/
input[type="checkbox"]:after {
  content: "\f00c";
  font: var(--fa-font-solid);
  font-size: "30px";
  color: white;
  display: none;
}
/* hover시 체크박스 색이 짙어짐 */
input[type="checkbox"]:hover {
  background-color: #a5a5a5;
}
/* 체크박스 체크시, 체크박스 배경색 바뀜 */
input[type="checkbox"]:checked {
  background-color: #5bcd3e;
}
/* 체크박스 체크 이후, 체크 박스 이후 요소인 체크 아이콘 css 변화
display:none => block을 줌으로써 이제 체크가 보인다.
*/
input[type="checkbox"]:checked::after {
  display: block;
}

 

참고자료