CSS를 사용하여 기본 확인란을 사용자 정의 이미지로 어떻게 바꿀 수 있습니까?

이미지 교체를 사용한 사용자 정의 CSS 체크박스 스타일링

CSS를 사용하여 기본 체크박스 모양을 사용자 정의 이미지로 바꾸는 데 장애물이 발생했습니다. CSS Ninja 튜토리얼을 사용해도 여전히 원하는 결과를 얻는 데 어려움을 겪고 있습니다.

명확하게 설명하자면 이 기술에는 체크박스 자체가 아니라 체크박스와 관련된 라벨의 스타일을 지정하는 것이 포함됩니다. 이를 통해 전체 이미지 사용자 정의가 가능합니다. 그러나 기본 모양이 표시되지 않도록 하려면 실제 확인란 요소를 숨겨야 합니다.

제공한 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는 직접 연결된 라벨을 대상으로 합니다. ID가 "foo"가 아닌 테이블 셀의 확인란을 사용합니다. 라벨의 배경 이미지를 "off.png"로 설정하고 높이와 패딩을 지정하며 이미지를 왼쪽 상단에 배치합니다.

"on" 상태를 설정하려면 다음 CSS를 사용하세요.

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

이전과 동일한 요소를 대상으로 하지만 확인란이 선택된 상태인 경우에만 해당됩니다. 이 규칙은 레이블의 배경 이미지를 "on.png"로 업데이트합니다.

전체 예:

다음 전체 코드 및 데모를 참조하세요.

• 요점: http://gist.github.com/592332
• JSFiddle: http://jsfiddle.net/4huzr/

핵심 사항:

• 표시 속성을 다음으로 설정하여 확인란을 항상 숨깁니다. "none".
• CSS 선택기 구문을 사용하여 관련 레이블의 스타일을 지정합니다.
• 선택된 상태와 선택되지 않은 상태를 구별하려면 ":checked" 의사 클래스를 사용합니다.
• 설정하는 것을 잊지 마세요. 라벨 스타일 내에서 배경 이미지 크기와 위치.

위 내용은 CSS를 사용하여 기본 확인란을 사용자 정의 이미지로 어떻게 바꿀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!