[CSS] checkbox input 커스텀 하기

사이드 프로젝트를 하다가 아래처럼 예쁜 체크박스를 구현할 일이 생겼다. 사실 예전에 React-Native에서도 비슷하게 체크박스 커스텀을 했었는데, 그 당시에는 button으로 구현했었다.

CheckBox 컴포넌트가 있던데 왜 안 썼을까.. 그래서 이번에는 다른 방법으로 구현해보고자 했다.

우선 기본 틀을 잡았다. 기본 아이디어는 다음과 같다. input을 숨기고, label로 input 값을 컨트롤한다.

이때 전체를 label로 감싸서 텍스트 클릭으로도 컨트롤 할 수 있도록 한다. input 값의 변화에 따라 div 스타일이 달라진다. style 파일에는 기본적인 스타일링과 특히 input이 체크되었을 때와 아닐 때의 div 스타일을 정의한다. 이렇게 하면 아래와 같이 예쁜 커스텀 체크박스가 완성된다!...