沒有標簽的純CSS復選框

Question

我一直在尋找一種輕松設置復選框樣式的方法，即使在我沒有標簽但沒有找到讓我完全滿意的答案的情況下，我決定嘗試自己尋找一種方法，以便所有其他人可能會發現它很有用。

Answer 1

這就是我最后得到的。

沒有標簽的CSS復選框

我要做的基本上是設置after元素的樣式，並將指針事件設置為none，以便您可以單擊true after元素。

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

這將是未經檢查的樣式

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

然后我們將檢查樣式

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

請注意，由於我們無法隱藏原始復選框，因此它仍然可以在after元素下看到（隱藏起來也將最終隱藏在元素之后和之前），因此您無法在after元素上使用透明效果，但是仍然可以像在示例中一樣，使用背景圖像的位置和背景色。

希望對您的風格有所幫助！ :)