[css] input checkbox 스타일 설정하기 :has 부모요소 선택

input checkbox 스타일을 쉽게 지정할 방법은 어떤것이 있을까? 기존에 작성된 더러운 코드들을 다 뜯어고치고 공통으로 스타일을 찾아보는데 확실시 html구조에서는 label 안에 넣어서 input을 적용해주는게 한눈에 보기에도 직관적이고 좋아보였다.(기존에 내가 짯던 코드들은 요소들이 분리되어있어 한눈에 보기 너무 불편했었다) 문제는 input 에 들어갈 체크박스 스타일을 박아찾아보다가 input type값을 활용해 css에서 부모요소를 찾아 고정 스타일을 주는 방법을 생각해냈다.

 

 

👉 main.js

const TermsWrap = () => {
  return (
    <Terms>
      <li>
        <div>
          <label htmlFor="terms">
            <input type="checkbox" id="terms" />
            <p>약관동의</p>
          </label>
        </div>
      </li>
      <li>
        <div>
          <label htmlFor="privacy">
            <input type="checkbox" id="privacy" />
            <p>개인정보 수집동의</p>
          </label>
        </div>
      </li>
    </Terms>
  );
};

 

 

input 요소를 체크해 부모 라벨에 스타일을 입혀주었다.

input는 타입에따라 스타일을 고정해서 사용이 가능하기때문에 이런식으로 작성하면 공통 스타일을 사용할때 매우매우 매우 편리했다.

앞으로도 :has 많이 이용할 예정!

 

👉 css

// input checkbox 타입의 스타일을 정의합니다
label:has(input[type="checkbox"]) {
  position: relative;
}
label:has(input[type="checkbox"]) p {
  font-size: 14px;
  color: var(--font_black_02);
}

label:has(input[type="checkbox"])::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: url(/img/common/register/checkbox.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
label:has(input[type="checkbox"]:checked)::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: url(/img/common/register/checkbox_active.svg);
  background-repeat: no-repeat;
  background-size: contain;
}