使用影像取代自訂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」。
完整範例:
請參考以下完整程式碼與示範:
重點:
以上是如何使用 CSS 將預設複選框替換為自訂圖像?的詳細內容。更多資訊請關注PHP中文網其他相關文章!