沒有標籤的純CSS複選框

Question

即使在沒有標籤的情況下，我一直在尋找一種輕鬆設置複選框樣式的方法，但我還沒有找到任何完全滿足我的答案，所以我決定嘗試找到一個人的方式，以便所有其他人可能會覺得它有用。

Answer 1

這就是我最終的結果。

CSS Checkbox without label

我做的是基本樣式的元素後，並設置指針的事件，沒有這樣你就可以點擊真正的元素之後。

這使我們可以讓複選框處理單擊並將其狀態從選中狀態更改爲未選中狀態，然後根據複選框狀態設置after元素的樣式。

這將是選中風格

.check:after{ 
    pointer-events: none; 
    background: white; 
    content: ... 
    .... 
} 

然後我們將有我們的檢查風格

.check:checked:after{ 
    background: green; /* Change background and maybe image */ 
    .... 
} 

請注意，原來的複選框，將仍然可見下的元素後，我們就可以來不會隱藏它（隱藏它最終會隱藏在元素之後和元素之前），所以你不能在後元素上使用透明度，但仍然可以像在示例中那樣使用背景圖像位置和背景顏色。

我希望這將幫助你與你的風格！ :)