有沒有一種方法可以使用純CSS來設置復選框或單選按鈕的樣式，即使用類？

Question

有沒有一種方法可以使用純CSS來設置復選框或單選按鈕的樣式，即沒有jQuery的class =“ newstyle”？ 我一直在網上搜索，我想知道是否有一種方法可以僅使用class =“”屬性來實現。 這是一個示例： http : //www.filamentgroup.com/examples/customInput/

編輯：我目前的實現方式：

<div class="styled-checkbox">
 <input type="checkbox" id="checkbox1" value="1" />
 <label for="checkbox1"><span></span>Test</label>
</div>

但是，從兼容性的角度來看，不確定這是否是實現此目標的正確方法，此外，默認情況下，div需要預設寬度，如果為auto，它將自動填充DOM。

Answer 1

您只需要一個類就可以實現所需的效果，但是說出您要設置復選框的樣式是錯誤的，因為不能直接通過CSS設置樣式。 這是因為該組件是由操作系統而不是瀏覽器本身控制的。

解決方法是使用一組普通元素來模擬復選框的外觀。

在您提供的鏈接的特定示例中，該復選框完全隱藏，因為它通過z-index保留在標簽的后面，該標簽的背景包含改進的復選框圖形版本。 有，如果你使用的事實相結合id \\ for屬性對為復選框和標簽，同時單擊標簽（它顯示一個復選框的圖像）的復選框將改變它的選中/取消選中狀態。