728x90
728x90
css를 이용해 기존 체크박스 스타일을 변경 할 수 있습니다
Html
<div class="item_content">
<div class="check_wrap">
<input type="checkbox" id="check_btn1"/>
<label for="check_btn1"><span>체크박스1</span></label>
</div>
<div class="check_wrap">
<input type="checkbox" id="check_btn2"/>
<label for="check_btn2"><span>체크박스2</span></label>
</div>
</div>
Css
input[type="checkbox"]{display:none;}
input[type="checkbox"] + label{
cursor:pointer;
}
input[type="checkbox"] + label > span{
vertical-align: middle;
padding-left: 5px;
}
input[type="checkbox"] + label:before{
content:"";
display:inline-block;
width:17px;
height:17px;
border:2px solid #3658de ;
border-radius: 4px;
vertical-align:middle;
}
input[type="checkbox"]:checked + label:before{
content:"";
background-color:#3658de ;
border-color:#3658de ;
background-image: url('/_html/images/contact_cont_check_btn.png');
background-repeat: no-repeat;
background-position: 50%;
}
반응형
'Code > Html' 카테고리의 다른 글
버튼 클릭 시 주소 복사하기 (0) | 2024.02.27 |
---|---|
TOP, BOTTOM 버튼 만들기 (0) | 2024.02.15 |
Div에 placeholder 구현하기 (0) | 2024.01.15 |
반전효과있는 마우스 커서 만들기 (0) | 2024.01.04 |
Select 에서 Option 클릭 시 이동 (0) | 2023.12.11 |