[TIL] Custom checkbox
2022.04.19 Today I Learned📚
checkbox를 설정하면 기본 스타일이 적용되어 나타난다.
하지만 기본 스타일을 그대로 사용하지 않고 원하는 디자인으로 조금 더 예쁘게 커스터마이징 할 수 있다.
✔️ Custom Checkbox
Checkbox를 이미지로 대체해보자.
1. input 요소 숨기기
새로운 checkbox를 만들기 위해 기존의 checkbox를 숨긴다.
<input type="checkbox" id="check">
<label for="check" class="check_label">초콜릿을 좋아하시나요?</label>
input[type="checkbox"] {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
2. label 수정하기
체크박스에 붙을 label을 수정한다. inline-block
을 적용하여 체크박스 옆에 붙도록 지정한다. input
의 id
와 label
의 for
네임을 같게 하여 label을 클릭해도 체크박스가 체크/해제 될 수 있도록 한다.
.check_label {
display: inline-block;
height: 22px;
margin: 17px 0 21px;
text-align: left;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #E9AEDF;
cursor: pointer;
}
3. 가상요소 만들어 체크박스 꾸미기
label 앞에 checkbox를 만들어 줄 것이기 때문에, 가상요소 ::before
를 생성한다. content
는 가상요소에 꼭 들어가야 하며, 내용이 없더라도 ""
혹은 ''
를 써줘야 가상요소가 존재함을 인식한다. 생성한 가상요소에 background-image
로 변경할 체크박스 이미지를 삽입한다.
.check_label::before{
display: inline-block;
content:"";
width:22px;
height:22px;
margin-right:8px;
vertical-align: -4px;
background-image:url("https://ifh.cc/g/jH4YNX.png
") ;
}
4. 체크되었을 때의 checkbox 꾸미기
checkbox:checked+label
으로 체크되었을 때의 checkbox 모습을 ::before
가상요소로 꾸며준다.
input[type="checkbox"]:checked+.check_label::before{
background-image:url("https://ifh.cc/g/jH4YNX.png") ;
}
Author And Source
이 문제에 관하여([TIL] Custom checkbox), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@florence_y/TIL-Custom-checkbox저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)