CSS模擬復選框是一種非常常見的技術,它可以使得我們在不使用JavaScript的情況下,根據用戶的選擇來設置不同的樣式。下面是一個簡單的例子:
input[type="checkbox"] { display: none; } label { display: inline-block; cursor: pointer; padding: 0 0 0 20px; position: relative; } label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; top: 2px; border: 1px solid #999; background-color: #fff; } input[type="checkbox"]:checked + label:before { content: "\2713"; color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
以上CSS代碼模擬了一個含有復選框的表單,其中復選框是通過元素實現的,但是它的顯示被設置為none。我們提供了一個label元素來代替原先的復選框,label元素的樣式決定了它被如何顯示。具體來說,我們在label元素before偽元素中定義了一個“假”復選框,包括它的大小,外觀和位置。
在CSS的其中一個優點是我們可以使用:checked偽類來匹配被選中的復選框。因此,在以上代碼中,我們為:checked的元素的下一個兄弟元素(即label元素)定義了一個:before偽元素的樣式,這個樣式會被應用在選中的復選框上。
在以上例子中,當用戶選中復選框時,樣式會發生變化,顯示一個?符號,背景色和邊框也會相應改變。這種方式非常靈活,可以根據具體的需求來進行調整。