그냥 꾸미면 되는게 아냐..? - input 체크박스 꾸미기

 

input 속성의 타입을 checkbox로 만들어주면, 위와 같은 모양의 체크박스가 default로 유지된다.

버튼처럼 그냥 보더를 없애고 예쁘게 꾸미면 되는 줄 알았는데... 그게 아니다?

 

이런 예쁜 체크박스들은.. 다 어디서 오는거야?

 

사실 체크박스는 기본 모양을 다르게 꾸며서 (버튼 꾸미는 것 처럼) 스타일링을 하는 것이 아니고,

기본 모양을 아예 보이지 않게 처리 한 뒤, 그 공간에 원하는 형태의 박스 이미지를 넣어줌으로써(이미지였다니!!) 변경하는 것이다.

체크 했을 때의 변경 된 모습은, 가상선택자 :checked를 사용하여 체크시 변경된 모습의 이미지를 하나 더 넣어주는 것이다.(속았다!)

 

---

체크박스 구현해보기

 

HTML

<p>
 <input class="stay-login-btn"
       type="checkbox"
       name="stay-login"
       id="chkbox"/>
 <label for="chkbox"><em></em>로그인 상태 유지</label>
</p>

 

체크 안했을 때

체크 했을 때

위의 체크박스를 만들어주겠다. 

 

---

1. 일단 기본 체크박스를 안보이게 만들자.

input[id="chkbox"] {
  display: none;
}

박스가 없어졌다!

---

2. 체크박스에 쓰일 이미지를 넣고 위치를 조정해주자

• 체크박스의 인접요소인 label을 선택하고 그 안에 em을 선택하였다.

기본으로 표시될 이미지를 넣어주었다.

input[id="chkbox"] + label em {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  background: url(./images/check-box.svg) 0 0 no-repeat;
  vertical-align: sub;
  cursor: pointer;
}

 

 

---

3. 가상선택자로 :checked, 즉 체크되었을 때 사용할 이미지를 넣어준다.

체크가 되었을때 변신할 이미지! 자연스러운 변신을 위해 transition속성을 추가해주었다.

input[id="chkbox"]:checked + label em {
  background: url(./images/checked-box.svg);
  transition: all ease 0.3s 0s;
}

---

완성본

 

이제 나도 체크박스 예쁘게 만들 수 있다!

 

아래는 참고했던 영상 링크

https://www.youtube.com/watch?v=Aw1vO6Moe-g&t=245s