테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

체크박스가 왜 이러는걸까요? 채택완료

모제코 3년 전 조회 2,065
답변 2
목록 

</p>

<p><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></p>

<p>

이렇게 구성된 체크박스입니다.

크게 건드린 부분은 없고 원소스 그대로일겁니다.

 

 

그런데 체크박스가 이렇게 겹치는 현상이 있네용? 띠용?

 

 

요소검사는 딱 이런데 이렇네요.

style.css는 이렇구요.

 

</p>

<p>.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}</p>

<p>

 

왜 이러는 걸까요?^^;;

 

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
C
CodeIU
3년 전

.selec_chk style 이 적용 안되고 있거나,

다른 css 파일에서 .selec_chk 속성을 덮어씌가 하고 있을 가능성이 있습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
모제코
3년 전
네 일단은 그냥 select_chk 연관 css들을 깔끔하게 걷어내서 통일화 시켰습니다.
아마 말씀하신 부분들 어딘가에 문제가 있었을 것 같습니다.
당장 해결은 못해서 좀 돌아갔지만 관심 갖고 의견 주셔서 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

C
CodeIU
3년 전

가능성 1. class 명 오타

이 아니라

 

가능성 2. style 누락

.chk_box input[type="checkbox"] { width: 0; height: 0;  position: absolute; left: -100000px}

같은 css 가 빠짐

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
모제코
3년 전
답변 감사드립니다.
가능성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}

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인