[CSS] CheckBox Customizing

🟦 기본 환경: IDE: VS code, Language: CSS

 

 

CheckBox Customizing

.customized {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #a4a4a4;
  appearance: none;
 
}
.customized:checked {
  background: #a10820;
  border: none;
  background-image: url('icon_check.png');
  background-position: center;
  background-size: cover;
  filter: invert(1);
 
}
 

1. .customized 

 * border-radius: 원형 모양 설정

 * background-color: 기본 배경색

 * apprearance: 웹 브라우저에서 각 태그에 적용하는 기본 스타일 제거

⭐ border-radius만 조정하면 변경되지 않으므로 appearance 속성을 사용해야 함

 

2. .customized:checked

 * background-size: 배경 이미지 checkbox 내 크기 조정

 * filter: invert(): 이미지 또는 요소의 색상을 반전

 - 0~1 사이값 선택 가능(0: 유지, 1: 반전)

⭐ filter가 적용된 속성 내에서 전체 적용되므로 색상이 들어간 다른 요소의 색상 조정 필요

 

 

 

참고 자료

[CSS] checkbox 둥글게 만들기