Input 태그 체크박스 커스텀하기 (이미지 넣기)

Input 태그 커스텀 작업하기

안녕하세요 오늘은 회원가입 페이지를 작업하다가 Input태그 체크박스(checkbox)를 커스텀하는 방법을 기록합니다.

[HTML]

<form className="checkForm">
      <label htmlFor="consen01">
        <input type="checkbox" name="check" id="consen01" />
        약관 전체 동의
      </label>

      <label htmlFor="consen02">
        <input type="checkbox" name="check" id="consen02" />만 14세 이상입니다.
      </label>

      <label htmlFor="consen03">
        <input type="checkbox" name="check" id="consen03" />
        서비스 이용약관(필수)
      </label>

      <label htmlFor="consen04">
        <input type="checkbox" name="check" id="consen04" />
        이벤트 및 할인 혜택 안내 동의
      </label>
    </form>

[CSS]

.checkForm {
  label {
    display: flex;
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 1em;
    input[type="checkbox"] {
      margin-right: 7px;
      width: 1.5em;
      height: 1.5em;
      background: $white no-repeat center center;
      border: 1px solid $mainColor;
      cursor: pointer;
      outline: none;
      appearance: none;
      border-radius: 50%;
      background-image: url("../pubilc/images/icon_uncheck.svg");
    }
  }
}

appearnace

이 속성은 운영체제 및 브라우저에 기본 설정되있는 테마 기반으로 요소를 표현합니다. 그러므로 커스텀 할 때는 이 기본 설정을 풀어줘야합니다. 그래서 appearance:none; 해주니 지정한 스타일들이 잘 나타납니다. 그리고 모던 브라우저에서는 정식 지원을 하지 않으니 프리픽스를 이용해서 사용해야 합니다.

체크박스, 라디오 박스 뿐만 아닌 텍스트, 검색창 등등 input태그에 해당되는 모든 타입들이 이런식으로 커스텀 가능합니다.

이미지 넣기

background: $white no-repeat center center;
background-image: url("../pubilc/images/icon_uncheck.svg");
cursor: pointer;
outline: none;
appearance: none;

결과물

바로 화면에 보이는 체크표시를 백그라운드 이미지로 넣었습니다.