[React] input checkbox 색깔 바꾸기, 커스텀 체크박스

굳이 리액트에 한정 되있진 않지만 리액트 프로젝트에서 사용 했으므로 기록 해두고자 진행하는 포스팅이다.

input checkbox 가 파란색이 디폴트인데 색을 다르게 해야한다고 퍼블리싱 요청이 와서 간만에 바꿔봤다

 <input
    id="test"
    type="checkbox"
    value="테스트"
    className={`filterCheckbox mr-[7px] align-[-3px]`}    
    checked={checkedInputs?.includes(`잇힝`) ? true : false}
/>

className 에서 눈치 채신분들도 계시겠지만 Tailwind 도 같이 사용중이다.
알맹이는 filterCheckbox 에 있다

background-color 로 내가 원하는 색깔 지정 가능하고, background image 안에 viewBox 값을 조정해서 화살표 위치 및 크기 조정 가능하다.

.filterCheckbox{
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(158, 158, 158, 1);
    border-radius: 2px;

    &:checked {
        border-color: transparent;
        background-image: url("data:image/svg+xml,%3csvg viewBox='2.5 2.5 11 11' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
        background-size: 100% 100%;
        background-position: 50%;
        background-repeat: no-repeat;
        background-color: rgba(34, 34, 34, 1);
    }
}

 

checked={checkedInputs?.includes(`잇힝`) ? true : false}

위는 체크박스 색 바꾸는거랑 전혀 연관없는건데 , 유저가 체크한 값을 저장해두고 있어야해서 그냥 check 할때마다 checkedInput  배열에 넣어서 진행을 했던거라 그냥 같이 껴서 적음 ㅋㄷ