[React] styled-components에서 input 체크박스 커스텀하기

이용약관 동의 페이지를 만들던 중에 기본 체크박스의 형태를 바꿔야 했는데 styled-components를 활용하여 체크박스를 커스텀해본 적이 없기 때문에 이번 기회에 방법을 찾아보면서 공부해봤다.

 

html 코드는 아래와 같다.

<label htmlFor="agree">
  <input type="checkbox" name="" id="agree" />
  <span>두마켓의 이용약관 및 개인정보처리방침에 대한 내용을 확인하였고 동의합니다.</span>
</label>

실행화면 (크롬에서 제공하는 기본 UI 체크박스)

 

두마켓의 이용약관 및 개인정보처리방침에 대한 내용을 확인하였고 동의합니다.

 

appearnce 속성 활용하기

appearance | MDN

 

appearance CSS 속성은 운영 체제 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용된다.

appearance : none;을 설정하면 네이티브 디자인을 해제할 수 있다. 그리고 원하는 형태의 디자인으로 속성을 설정하면 된다.

export const Check = styled.input`
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #c4c4c4;
  &:checked {
    background: url(${CheckImg}) no-repeat center / 80%;
    border: 1px solid #1c1c1c;
  }
`;

unchecked

checked

이런 식으로 appearance 속성을 활용하면 간단하게 체크박스 커스텀이 가능하다.

 

하지만 appearance 속성은 IE 지원을 하지 않는다는 점...