Pure CSS를 사용하여 기본 체크박스 이미지를 사용자 정의 On/Off 이미지로 어떻게 바꿀 수 있습니까?

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

체크박스 목록이 있는 HTML 테이블에서 기본 체크박스 이미지를 맞춤 설정/해제 이미지로 교체할 수 있습니다. CSS를 활용하여 이러한 미적 향상을 달성할 수 있습니다.

CSS 사용자 정의 입력 기술

"CSS ninja"에서 언급했듯이 한 가지 접근 방식은 의사 클래스를 사용하여 체크박스와 관련된 레이블의 스타일을 지정하는 것입니다. 확인란 자체가 아닌 이렇게 하면 이미지가 올바른 위치에 표시되고 체크박스 상태에 응답하게 됩니다.

CSS 코드 구현

아래에는 실제 체크박스를 숨기고 이를 연결하는 완전한 CSS 코드가 제공됩니다. 스타일이 지정된 라벨:

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

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

다음은 code:

• 체크박스(input[type="checkbox"])는 display: none;을 사용하여 숨겨집니다.
• 체크박스와 연결된 레이블(input[type="checkbox") "] 라벨)은 블록 표시, 너비와 높이가 16px, 배경 이미지가 "off" 상태인 이미지를 갖도록 스타일화되었습니다.
• 확인란을 선택하면(input[type="checkbox"]:checked) "켜짐" 상태 이미지의 새로운 배경 이미지가 라벨에 적용됩니다.

결과

이것은 CSS 코드는 기본 체크박스 이미지를 사용자 정의 설정/해제 이미지로 성공적으로 대체하여 시각적으로 더욱 매력적이고 사용자 정의 가능한 체크박스 목록을 제공합니다. 특정 웹 디자인 미학에 맞게 다양한 이미지 디자인을 실험해 볼 수 있습니다.

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