[CSS] checkbox input 커스텀 하기

사이드 프로젝트를 하다가 아래처럼 예쁜 체크박스를 구현할 일이 생겼다.

사실 예전에 React-Native에서도 비슷하게 체크박스 커스텀을 했었는데, 그 당시에는 button으로 구현했었다. CheckBox 컴포넌트가 있던데 왜 안 썼을까.. 그래서 이번에는 다른 방법으로 구현해보고자 했다.

 

우선 기본 틀을 잡았다.

 

기본 아이디어는 다음과 같다.

 

1. input을 숨기고, label로 input 값을 컨트롤한다. 이때 전체를 label로 감싸서 텍스트 클릭으로도 컨트롤 할 수 있도록 한다.
2. input 값의 변화에 따라 div 스타일이 달라진다.

style 파일에는 기본적인 스타일링과 특히 input이 체크되었을 때와 아닐 때의 div 스타일을 정의한다.

 

 

이렇게 하면 아래와 같이 예쁜 커스텀 체크박스가 완성된다!