[CSS] input[type="checkbox"] 커스텀하기

[CSS] input[type="checkbox"] 커스텀하기

🎈 체크박스 CSS 변경하기

<input type="checkbox"/>는 기본 디자인을 가지고 있다. 하지만 디자인시안에 따라 체크박스 디자인도 변경해야 할 때가 있어서 정리해본다

 

기본 디자인

디자인 적용

 

🎈 HTML

<input />의 기본 디자인은 CSS로 안보이게 해주고 <span class="checkbox_icon"></span>요소가 체크박스 디자인이 될 것이다. <span class="checkbox_text"></span>은 체크박스 옆에 텍스트가 들어갈 요소이다.

<!-- checkbox -->
<label class="checkbox_label">
  <input type="checkbox"  >
  <span class="checkbox_icon"></span>
  <span class="checkbox_text">체크</span>
</label>
<!-- // checkbox -->

🎈 기존 check 박스 디자인 초기화

input[type="checkbox"]를 안보이게 스타일을 적용해준다

/* input 초기화 */
input[type='checkbox']{
  display: none;
}

🎈 checkbox 디자인하기

스타일을 적용하면 html과 css로 원하는 input 디자인을 만들 수 있다

/* (체크박스, 텍스트) 정렬 맞추기 */
.checkbox_label{
  display: flex;
  align-items: center;
}

/* 체크박스 디자인 */
.checkbox_icon::before{
  content:'';
  display: block;
  margin-right: 5px;
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: transparent;
  border: 1px solid #9da3a5;
  box-sizing:border-box;
  position: relative;
  cursor: pointer;
}

/* checked */
.checkbox_label input:checked + .checkbox_icon::before{
/*   transition: all 0.15s ease; */
  background: url(https://intranet.adef.co.kr/asset/images/ic_check.png) #03c75a
    no-repeat center;;
  border:none;
}