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

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

문제

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

솔루션

퓨어 시맨틱 HTML/CSS 솔루션

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

단계:

1. 체크박스에 고유 ID를 할당하고 라벨의 for를 사용하여 라벨에 연결합니다. 속성.
2. CSS를 사용하여 체크박스를 숨깁니다(예: display: none;).

3. label::before 의사 요소를 체크박스의 시각적 대체 요소로 사용:

   • 체크 해제된 항목에 대한 초기 배경 이미지를 설정합니다. 상태.

4. 체크박스가 선택되었을 때 이미지를 변경하려면 :checked 의사 선택기를 활용하세요.

   • 체크된 상태에 대한 배경 이미지 적용 .
   • 동위 선택기( )를 사용하여 인접한 라벨만 타겟팅합니다.
5. 올바른 위치, 디스플레이, 너비 및 높이로 라벨 스타일을 지정하세요.

편집

순수한 CSS 체크박스 교체

이 수정은 CSS를 사용하지 않고 순수하게 CSS 기반 솔루션을 선보입니다. 이미지:

• "✓" 내용으로 레이블에 ::before 요소를 만듭니다.
• 둥근 테두리와 전환을 적용하여 시각적 모양을 향상합니다.

구현

코드펜 예제는 이 기술을 다음에서 보여줍니다. 작업:

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;
}

<ul>
  <li><input type="checkbox">

위 내용은 이미지를 사용하고 클릭 시 이미지를 축소하고 체크박스를 오버레이하는 확인란 대안을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!