input checkbox custom

프로젝트를 진행하다보면 컨셉에 따라 체크박스의 기본 디자인 대신에 다른 디자인으로 변경해야 하는 경우가 있다. 그래서 input태그의 checkbox를 커스텀하는 방법에 대해 정리해보았다.

 

⭐ 주요 포인트

input 태그의 id, 와 label태그의 for 에 같은 값을 할당해야 label 클릭 시 input 체크에 영향이 미친다.

checked 속성을 활용하여 체크 전 후 스타일링을 다르게 줄 수 있다.

 

Html

<div class="input_area">
    <div class="flex_line">
       <input
          type="checkbox"
          name="cate"
          id="all"
          value="all"
         />
        <label for="all">전체</label>
     </div>
</div>

 

Css

label{
  cursor: pointer;
}

.input_area input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #000;
  appearance: none;
  cursor: pointer;
}

.input_area input[type="checkbox"]:checked {
  background: #000;
  border: none;
}

 

See the Pen Untitled by pminsun (@pminsun) on CodePen.