Html＆JQuery checkbox, radio button with xeicon
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-27 20:43
조회view: 7
본문
checkbox, radio button with xeicon
css를 이용한 체크박스, 라디오버튼
그누보드 css 참고
css
/* checkbox, radio*/
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;opacity:0;outline:0;z-index:-1;}
.chk_box {position:relative;}
.chk_box input[type="checkbox"] + label {display:inline-block;position:relative;padding-left:30px;line-height:22px;font-weight:normal;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="checkbox"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;background:#ccc;border:none;border-radius:50%;}
.chk_box input[type="checkbox"] + label:hover span {}
.chk_box input[type="checkbox"] + label span:after {content:"\e928";display:block;position:absolute;left:0px;top:0px;width:22px;height:22px;font-family:"xeicon";color:#fff;font-size:14px;text-align:center;line-height:22px;background:none;z-index:1;cursor:pointer;}
.chk_box input[type="checkbox"]:checked + label {color:#ff7700}
.chk_box input[type="checkbox"]:checked + label span {background:var(--color);}
.chk_box input[type="checkbox"]:checked + label span:after {}
.all_chk.chk_box input[type="checkbox"] + label span {}
.chk_box input[type="radio"] + label {display:inline-block;position:relative;padding-left:30px;line-height:22px;font-weight:normal;vertical-align:baseline;cursor:pointer;}
.chk_box input[type="radio"] + label span {display:block;position:absolute;left:0;top:0px;width:22px;height:22px;background:#ccc;border:none;border-radius:50%;}
.chk_box input[type="radio"] + label:hover span {}
.chk_box input[type="radio"] + label span:after {content:"\e928";display:block;position:absolute;left:0px;top:0px;width:22px;height:22px;font-family:"xeicon";color:#fff;font-size:14px;text-align:center;line-height:22px;background:none;z-index:1;cursor:pointer;}
.chk_box input[type="radio"]:checked + label {color::#ff7700}
.chk_box input[type="radio"]:checked + label span {background:var(--color);}
.chk_box input[type="radio"]:checked + label span:after {}html
<span class="chk_box">
<input type="text" name="chk" id="chk" value="1" class="selec_chk"><label for="chk"><span></span>css를 이용한 체크박스</label>
</span>