[HTML5, CSS3] input checkbox 스타일 설정하기

checkbox를 스타일해보자

 

 

기본적인 input checkbox 로는 이렇게 원하는대로 스타일링을 할 수 없다.

그렇다고 기본 input 태그를 이용하자니 너무 안 이쁘기도 하고, 브라우저마다 제공하는 기본 체크박스 모양이 달라 UX에도 좋지 않다.

 

기본 checkbox를 사용하는 대신에 input 태그를 숨기고 label 태그를 이용해 스타일링을 하면 된다.

 

먼저 html을 이렇게 설정하자

<div class="input-area">
    <input class="hidden" type="checkbox" id="checkbox">
    <label class="btn" for="checkbox"></label>
    <label class="desc" for="checkbox">클릭</label>
</div>

여기서 input 태그의 id 속성 값과 label의 for 속성의 값이 일치해야 한다.

해당 값이 일치해야 label 태그를 클릭했을 때 input 태그도 같이 선택된다.

 

다음 css를 통해 input 태그를 숨기고 label class="btn" 값을 스타일링 하면 된다.

.input-area {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.input-area input[type="checkbox"].hidden {
  position: absolute;
  display: block;
  top: -1px;
  left: -1px;
  z-index: -1;
  overflow: hidden;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

.input-area input[type="checkbox"]:checked + .btn {
  background: url('./check-solid.svg') no-repeat center;
  background-size: 60%;
}

.input-area label.btn {
  background: transparent;
  border: 1px solid #000;
  border-radius: 3px;
  width: 20px;
  height: 20px;
}

.input-area label.desc {
  font-size: 18px;
  font-weight: 400;
  padding-left: 6px;
}

 

이런식으로 label 태그를 사용해서 내가 원하는 모든 모양으로 checkbox를 만들 수 있다