HTML 및 CSS를 사용하여 라디오 버튼을 이미지로 어떻게 바꿀 수 있습니까?

이미지 자리 표시자가 있는 라디오 버튼

라디오 버튼을 이미지로 바꾸려면 다음 단계를 따르세요.

1. 라디오 버튼과 이미지를 :에 배치하세요. 라디오 버튼 배치 요소를 연관시키세요.
2. 라디오 버튼 숨기기: 라디오 버튼의 모양을 제거하려면 위치를 절대값으로, 불투명도를 0으로, 너비와 높이를 0으로 설정하세요.
3. 형제 선택기를 사용하여 이미지 타겟팅: 인접한 형제 선택기( )를 사용하여 숨겨진 이미지 옆에 있는 이미지를 타겟팅합니다. 라디오 버튼.
4. 스타일 체크 이미지: 체크 라디오 버튼에 인접한 이미지에 윤곽선이나 색상 변경 등 스타일을 적용합니다.
5. 제공 대체 텍스트: 라디오 버튼의 역할을 하므로 접근성을 위해 이미지에 alt 속성이 있는지 확인하세요. label.

다음은 이 솔루션을 보여주는 샘플 CSS 및 HTML 코드입니다.

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

위 내용은 HTML 및 CSS를 사용하여 라디오 버튼을 이미지로 어떻게 바꿀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!