[체크박스 커스텀] 리액트로 상태관리 하지않고 기본 Input을 이미지로 설정하기 (전역설정해두면 아주 편리함)

리액트에서 state로 체크박스 상태를 관리하기도 하는데,

아래와 같은 방식을 사용해서 전역 스타일시트에 추가만해주면

모든 페이지에서 input들이 자동으로 커스텀되어 나온다.

 

    /* 기본 체크박스 숨기기 */
      input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 13px;
        height: 13px;
        margin: 0;
        cursor: pointer;
        background-image: url("/static/img/unchecked.png");
        background-size: cover;
        background-repeat: no-repeat;
        border: none;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }

      /* 체크된 상태 */
      input[type="checkbox"]:checked {
        background-image: url("/static/img/checked.png");
      }

      /* 비활성화 상태 */
      input[type="checkbox"]:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

 

 

이렇게 전역에 css 를 설정해두고 <input type="checkbox" /> 한줄만 쓰면 어디서든 커스텀된 인풋을 사용가능하다

 

이미지 적용한 모습

 

나는 피그마 디자인이랑 똑같이 작업해야해서 이미지로 했지만, 그냥 체크박스 색만 바꾸고 싶다면

 

 accent-color: #25448f

accent-color를 사용하면 된다

체크박스 배경색이 설정되고 안의 체크표시 색상은 css 가 알아서 흰색이나 검은색으로 바꿔준다.