체크박스가 왜 이러는걸까요?
본문
<td scope="col" class="all_chk chk_box">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
<label for="chkall">
<span></span>
<b class="sound_only">현재 페이지 게시물 전체선택</b>
</label>
</td>
이렇게 구성된 체크박스입니다.
크게 건드린 부분은 없고 원소스 그대로일겁니다.
그런데 체크박스가 이렇게 겹치는 현상이 있네용? 띠용?
요소검사는 딱 이런데 이렇네요.
style.css는 이렇구요.
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {padding-left:20px;color:#676e70}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:0;left:0;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
왜 이러는 걸까요?^^;;
답변 2
.selec_chk style 이 적용 안되고 있거나,
다른 css 파일에서 .selec_chk 속성을 덮어씌가 하고 있을 가능성이 있습니다.
<input type="checkbox" id="chkall"...
이 항목을 개발자 도구로 찍어서 어떤 스타일이 적용되고 있는지 확인하세요
네 일단은 그냥 select_chk 연관 css들을 깔끔하게 걷어내서 통일화 시켰습니다.
아마 말씀하신 부분들 어딘가에 문제가 있었을 것 같습니다.
당장 해결은 못해서 좀 돌아갔지만 관심 갖고 의견 주셔서 감사합니다.
가능성 1. class 명 오타
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="selec_chk">
이 아니라
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);" class="select_chk">
가능성 2. style 누락
.chk_box input[type="checkbox"] { width: 0; height: 0; position: absolute; left: -100000px}
같은 css 가 빠짐
답변 감사드립니다.
가능성1. class명은 basic 스킨 css 파일에서도 selec_chk 로 되어 있고 css와 html 상의 클래스명 매칭은 잘 되어 있습니다.
가능성2. 역시 basic 스킨과 다를바가 없습니다.
/* 게시판 목록 공통 */
.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {position:relative;color:#676e70}
.chk_box input[type="checkbox"] + label:hover {color:#2172f8}
.chk_box input[type="checkbox"] + label span {float:left;width:15px;height:15px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.write_div .chk_box input[type="checkbox"] + label, .bo_vc_w .chk_box input[type="checkbox"] + label {padding-left:20px}
.write_div .chk_box input[type="checkbox"] + label span, .bo_vc_w .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px}
