如何使用 HTML 和 CSS 將單選按鈕替換為圖片？

帶有影像佔位符的單選按鈕

要將單選按鈕替換為影像，請依照下列步驟操作：

1. 將單選按鈕和圖像包裹在中：放置單選按鈕以及 內的相應圖像元素來關聯它們。
2. 隱藏單選按鈕：要刪除單選按鈕的外觀，請將其位置設為絕對，不透明度設為 0，寬度和高度設為 0。
3. 使用同級選擇器定位影像：使用相鄰的同級選擇器 ( ) 來定位隱藏單選按鈕旁的影像按鈕。
4. 為選取的影像設定樣式： 將樣式套用於與選取的單選按鈕相鄰的影像，例如輪廓或色彩變更。
5. 提供 Alt文字： 確保圖像具有 alt 屬性以實現可訪問性，因為它將用作單選按鈕的標籤。

以下是示範此解決方案的範例 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="/static/imghwm/default1.png" data-src="https://via.placeholder.com/40x60/0bf/fff&text=A" class="lazy" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="/static/imghwm/default1.png" data-src="https://via.placeholder.com/40x60/b0f/fff&text=B" class="lazy" alt="Option 2">
</label>

以上是如何使用 HTML 和 CSS 將單選按鈕替換為圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！