如何使用純 CSS 將預設複選框圖像替換為自訂開/關圖像？

純CSS 複選框影像替換

在具有複選框清單的HTML 表格中，您可能想要使用自訂開/關影像替換預設複選框選框影像。可以利用 CSS 來實現這種美感增強。

CSS 自訂輸入技術

如「CSS 忍者」所提到的，一種方法涉及使用偽類來設定與複選框關聯的標籤的樣式，而不是複選框本身。這可確保影像顯示在正確的位置並回應複選框的狀態。

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:

• 使用display: none 隱藏複選框(input[type="checkbox"])。
• 與複選框關聯的標籤(input[type="checkbox"] "] label) 的樣式為區塊顯示，寬度和高度為16px，以及「關閉」狀態影像的背景影像。
• 當複選框被選中(input[type="checkbox"]:checked)，「on」狀態影像的新背景影像將會套用至標籤。 CSS程式碼將成功以自訂開/關圖片取代預設複選框圖像，為您提供更具視覺吸引力和可自訂的複選框清單。設計美學。

以上是如何使用純 CSS 將預設複選框圖像替換為自訂開/關圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！