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

純 CSS 複選框圖像替換

對於您的複選框列表，您的目標是使用 CSS將預設複選框影像替換為自訂開/關影像.

要實現這一目標，請遵循以下步驟步驟：

1. 隱藏原始複選框：

   • 使用CSS 顯示：無；屬性來隱藏本機複選框。

2. 建立自訂標籤：

   • 將標籤放置在隱藏複選框旁邊使用標籤輸入。
   • 此標籤將負責顯示您的自訂圖片。

3. 使用背景影像設定標籤樣式：

   • 使用背景圖片和輸入[type=checkbox ]:檢查偽類以在開啟和關閉之間切換

4. 正確定位影像：

   • 調整背景位置屬性以在影像內正確對齊影像

完整CSS 程式碼範例：

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

注意： 確保路徑您的自訂圖片是正確的。請參閱提供的 JavaScript Fiddle 和 Gist 以取得完整的工作範例。

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