[CSS] 체크박스 꾸미기

체크박스 꾸미는 방법

체크박스는 체크박스와 연결된 label을 만들고, 라베을 꾸미며 됩니다.

그렇게 할 경우 라벨을 클릭하면 체크박스가 클릭되고, 다시 클릭하면 체크가 해제되는 성질을 가지게 됩니다.

---

체크박스 꾸미기

빈 라벨을 가진 체크박스를 생성합니다.

이때 for 속성을 이용하여 체크박스와 라벨을 연결 해야 합니다.

(이때 Next.js를 사용하는 경우 for이 아니라 htmlFor을 사용해야 합니다.)

<div>
    <input
    type="checkbox"
    id="rememberUserInfo"
    defaultChecked={checkState}
    onClick={handleCheckboxChange}
    ></input>
    <label htmlFor="rememberUserInfo"></label>
    <span>자동 로그인</span>
</div>

---

라벨 꾸미기

1. 라벨을 원하는 모양으로 꾸밉니다.

(여기서 "input"은 #rememberUserInfo이고, "+ label"을 사용해서 input에 연결된 label을 선택 합니다.)

  & #rememberUserInfo + label {
    width: 20px;
    height: 20px;
    background: #fbfbfb 0% 0% no-repeat padding-box;
    border: 2px solid #e1e1e1;
    border-radius: 2px;
    opacity: 1;
    cursor: pointer;

    position: relative;
    top: 3px;
  }

 

2. 라벨을 클릭 했을 때의 모양을 만듭니다.

  & #rememberUserInfo:checked + label {
    background-color: #038dff;
    border: 2px solid #038dff;
  }

 

3. 체크박스 숨기기

  & #rememberUserInfo {
    display: none;
  }

---

CSS / 체크박스 꾸미는 방법