單選框和復(fù)選框是Web表單中常用的兩種表單控件。在一些情況下,我們需要對它們的樣式進行自定義以滿足特定的需求。下面我們將介紹如何通過CSS樣式來改變單選框和復(fù)選框的外觀:
1.改變復(fù)選框的樣式
/*隱藏默認的復(fù)選框*/ input[type="checkbox"] { display: none; } /*使用偽元素來模擬復(fù)選框*/ input[type="checkbox"] + label:before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 10px; border: 1px solid #999; border-radius: 3px; background-color: #fff; } /*改變選中狀態(tài)下的復(fù)選框樣式*/ input[type="checkbox"]:checked + label:before { content: "\2714"; text-align: center; font-size: 12px; line-height: 16px; color: #fff; background-color: #007bff; }
代碼解析:
首先我們將原本的復(fù)選框隱藏(display: none;),然后使用偽元素來模擬出一個復(fù)選框(input[type="checkbox"] + label:before)。 在選中狀態(tài)下,我們將偽元素的內(nèi)容改為“\2714”,即勾選符號,同時改變背景顏色為藍色。
2.改變單選框的樣式
/*隱藏默認的單選框*/ input[type="radio"] { display: none; } /*使用偽元素來模擬單選框*/ input[type="radio"] + label:before { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 10px; border: 1px solid #999; border-radius: 50%; background-color: #fff; } /*改變選中狀態(tài)下的單選框樣式*/ input[type="radio"]:checked + label:before { content: ""; text-align: center; font-size: 12px; line-height: 16px; color: #fff; background-color: #007bff; }
代碼解析:
單選框的改變與復(fù)選框類似,只是將border-radius改為50%來設(shè)置圓形的外觀,并且在選中狀態(tài)下去掉偽元素的內(nèi)容。
總結(jié):
通過以上兩種樣式更改,我們可以靈活地創(chuàng)建出特定外觀的單選框和復(fù)選框。