CSS | input checkbox 스타일 변경

input 태그의 type="checkbox"을 지정하면 기본으로 제공하는 체크박스를 사용할 수 있다.

그런데, 여러 웹사이트를 보면 디자인이 다양하다. 클론코딩을 하면서 해당 사이트와 최대한 흡사하게 꾸며보고싶었다.

쉽게 변경이 가능할줄 알았지만, CSS로는 checkbox 스타일 변경이 불가능했다ㅠㅠ

그래서 찾아봤더니 <label>, <span> 등을 활용해서 커스텀이 가능했다.

 

Before

기본 디자인의 checkbox이다.

 

Before JSX

<input
  type="checkbox"
  className="ConsentChkBox"
  id="FullConsentChkBox"
  onChange={(e) => handleAllCheck(e.target.checked)}
  checked={
    checkedConsent.length === ConsentList.length ? true : false
  }
/>
<span>전체 동의</span>

 

input태그의 체크박스를 대신할 태그를 별도로 선언하고 해당 태그를 원하는 체크박스 모양으로 지정해 준다.

내가 사용한 태그는 label이다.

그리고 기본 input 체크박스 대신 사용할 태그에 for 또는 htmlFor라는 속성으로 input박스의 id를 지정하여 연결해준다.

그러면 대신하는 태그를 선택했을때 input 태그도 체크가된다.

코드를 보자.

 

After JSX

<input
  type="checkbox"
  className="ConsentChkBox"
  id="FullConsentChkBox"
  onChange={(e) => handleAllCheck(e.target.checked)}
  checked={
    checkedConsent.length === ConsentList.length ? true : false
  }
/>

{/* input checkbox 대신 사용할 체크박스를 input 태그의 id로 연결 */}
<label htmlFor="FullConsentChkBox">
<span>전체 동의</span>
</label>

 

After CSS

/* 기존 input 체크박스 가리기 */
.ConsentChkBox {
  display: none;
}

/* 대신할 체크박스 CSS */
.ConsentChkBox + label {
  display: inline-block;
  align-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  cursor: pointer;
}

.ConsentChkBox + label:hover {
  background-color: #ececec;
}

/* 대신할 체크박스를 클릭했을때 CSS */
.ConsentChkBox:checked + label::after {
  margin-left: 2px;
  content: "\2713";
  color: #fff;
  font-size: 16px;
}

.ConsentChkBox:checked + label {
  background: #36f;
}

 

After

content: "\2713";

이 속성으로 커스텀한 체크박스를 클릭했을때 체크 모양을 설정할 수 있다.

content:'✔';

이런식으로도 지정이 가능하다.

 

.ConsentChkBox:checked + label {

background: #36f;

}

이 속성을 적용해 주어야 체크했을때 체크박스 배경 전체의 색이 변경된다.