Pure CSS를 사용하여 기본 체크박스 이미지를 사용자 정의 On/Off 이미지로 바꾸는 방법은 무엇입니까?

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

체크박스 목록의 경우 CSS를 사용하여 기본 체크박스 이미지를 맞춤 설정/해제 이미지로 바꾸는 것을 목표로 합니다. .

이를 달성하려면 다음을 따르세요. 단계:

1. 원본 확인란 숨기기:

   • CSS 표시 사용: 없음; 기본 확인란을 숨기려면 속성을 사용하세요.

2. 맞춤 라벨 만들기:

   • 숨겨진 확인란 옆에 라벨을 배치하세요. 라벨 입력을 사용합니다.
   • 이 라벨은 사용자 정의 표시를 담당합니다. 이미지.

3. 배경 이미지로 라벨 스타일 지정:

   • 배경 이미지 및 입력[type=checkbox] 사용 ]:켜짐과 꺼짐 사이를 전환하기 위해 의사 클래스를 선택했습니다. 이미지.

4. 이미지 위치를 올바르게 지정하세요.

   • 배경 위치 속성을 조정하여 이미지 내에서 올바르게 정렬하세요. label.

전체 CSS 코드 예:

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

참고: 사용자 정의 이미지가 정확합니다. 전체 작업 예제는 제공된 JavaScript Fiddle 및 Gist를 참조하세요.

위 내용은 Pure CSS를 사용하여 기본 체크박스 이미지를 사용자 정의 On/Off 이미지로 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!