순수 CSS 체크 박스 이미지 교체

순수 CSS 체크 박스 이미지 교체

---

테이블에 체크 박스 목록이 있습니다. (행에있는 여러 CB 중 하나)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

확인란 이미지를 한 쌍의 사용자 지정 켜기 / 끄기 이미지로 바꾸고 싶습니다. CSS로이 작업을 수행하는 방법을 더 잘 이해하고있는 사람이 있는지 궁금합니다.

이 "CSS 닌자"튜토리얼을 찾았지만 조금 복잡하다는 것을 인정해야합니다. http://www.thecssninja.com/css/custom-inputs-using-css

내가 말할 수있는 한, 당신은 의사 클래스를 사용할 수 있습니다.

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

내 기대는 위의 CSS를 추가하면 확인란이 적어도 기본적으로 OFF 상태로 이미지를 표시하고 다음을 추가하여 ON을 얻는 것입니다.

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

불행히도 어딘가에서 중요한 단계를 놓친 것 같습니다. 현재 설정과 일치하도록 사용자 지정 CSS3 선택기 구문을 사용하려고 시도했지만 누락 된 것이 있어야합니다 (중요한 경우 이미지 크기는 16x16 임).

http://www.w3.org/TR/css3-selectors/#checked

편집 : 튜토리얼에서 입력 자체가 아닌 레이블에 이미지 변경 사항을 적용하는 내용이 누락되었습니다. 페이지의 확인란 결과에 대해 예상되는 스왑 이미지를 여전히 얻지 못하고 있지만 더 가깝다고 생각합니다.

---

당신은 이미 가깝습니다. 확인란을 숨기고 스타일을 지정하는 레이블과 연결하십시오.input[checkbox] + label

전체 코드 : http://gist.github.com/592332

JSFiddle : http://jsfiddle.net/4huzr/

---

CSS3를 선택하면 javascript를 사용할 필요가없는 것 같습니다.

:before선택기 를 사용 하면 두 줄의 CSS에서이 작업을 수행 할 수 있습니다. (관련 스크립트 없음).

이 접근 방식의 또 다른 장점은 <label>태그에 의존하지 않고 누락 된 경우에도 작동한다는 것입니다.

참고 : CSS3를 지원하지 않는 브라우저에서는 체크 박스가 정상적으로 보입니다. (구버전과 호환되는).

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }​

여기에서 데모를 볼 수 있습니다 : http://jsfiddle.net/hqZt6/1/

그리고 이것은 이미지와 함께 :

http://jsfiddle.net/hqZt6/6/

---

더 많은 사용자 정의를 찾고 있다면

다음 라이브러리를 확인하십시오. https://lokesh-coder.github.io/pretty-checkbox/

감사

참고 URL : https://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement