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

使用影像取代自訂CSS 複選框樣式

您在使用CSS 以自訂影像取代預設複選框外觀時遇到了障礙。儘管使用了 CSS Ninja 教程，您仍然面臨著實現所需結果的困難。

需要澄清的是，該技術涉及對複選框的關聯標籤進行樣式設置，而不是對複選框本身進行樣式設置。這允許完整的圖像自訂。但是，您必須確保隱藏實際的複選框元素，以避免顯示其本機外觀。

以下是您提供的 CSS 的細分：

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

此 CSS 面向直接關聯的標籤表格單元格中的複選框沒有 ID「foo」。它將標籤的背景圖像設為“off.png”，指定其高度和填充，並將圖像定位在左上角。

要設定「on」狀態，請使用下列 CSS：

td:not(#foo) > input[type=checkbox]:checked + label {
    background: url('/images/on.png') 0 0px no-repeat;
}

它的目標元素與之前相同，但僅限於複選框處於選取狀態時。此規則將標籤的背景圖片更新為「on.png」。

完整範例：

請參考以下完整程式碼與示範：

• 重點：http://gist.github.com/ 592332
• JSFiddle： http://jsfiddle.net/4huzr/

重點：

• 將其顯示屬性設為「none」來始終隱藏複選框.
• 使用CSS 選擇器語法設定關聯標籤的樣式。
• 使用":checked" 偽類用於區分選取和未選取狀態。
• 請記得在標籤樣式中設定背景圖片大小和位置。

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