이미지를 사용하고 클릭 시 이미지를 축소하여 체크박스를 오버레이하는 확인란 대안을 어떻게 만들 수 있습니까?-CSS 튜토리얼-php.cn

이미지를 사용하고 클릭 시 이미지를 축소하여 체크박스를 오버레이하는 확인란 대안을 어떻게 만들 수 있습니까?

Susan Sarandon

풀어 주다： 2024-11-13 14:25:02

원래의

798명이 탐색했습니다.

How can I create a checkbox alternative that uses images and shrinks the image upon clicking, overlaying a tick box?

체크박스와 같은 이미지 사용

문제

사용자가 이미지를 클릭하여 이미지를 축소하고 체크박스를 오버레이하는 표준 체크박스에 대한 대안을 만듭니다.

솔루션

순수 시맨틱 HTML/CSS 솔루션

이 솔루션을 사용하면 사전 제작된 솔루션이 필요 없으며 CSS 기술에 대한 이해도가 높아집니다.

단계:

체크박스에 고유한 ID를 할당하고 라벨의 for 속성을 사용하여 라벨에 연결합니다.
CSS를 사용하여 체크박스를 숨깁니다(예: 디스플레이 : 없음;).
체크박스의 시각적 대체 요소로 레이블::before 의사 요소를 사용합니다.
- 선택되지 않은 상태에 대한 초기 배경 이미지를 설정합니다.
:checked 의사 선택기를 활용하여 체크박스가 선택되었을 때 이미지를 변경합니다.
- 선택된 상태에 배경 이미지를 적용합니다.
- 동위 선택기( )를 사용하면 체크박스에 인접한 라벨만 타겟팅할 수 있습니다.
올바른 위치, 디스플레이, 너비 및 높이로 라벨 스타일을 지정하세요.

편집

순수한 CSS 체크박스 교체

이 수정은 이미지를 사용하지 않고 순수한 CSS 기반 솔루션을 보여줍니다.

다음을 생성합니다. :"✓"라는 내용이 있는 레이블의 요소 앞에.
둥근 테두리와 전환을 적용하여 시각적 모양을 강화합니다.

구현

코드펜 예제에서 이를 보여줍니다. 실제 기술:

http://codepen.io/anon/pen/wadwpx

코드 조각

/* Style the labels and images */
label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  /* disable text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

/* Style the checked state */
:checked + label {
  border-color: #ddd;
}

:checked + label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

/* Style the unordered list that contains the checkboxes */
ul {
  list-style-type: none;
}

/* Style the individual list items */
li {
  display: inline-block;
}

로그인 후 복사