單選框和復選框是Web表單中常用的兩種表單控件。在一些情況下，我們需要對它們的樣式進行自定義以滿足特定的需求。下面我們將介紹如何通過CSS樣式來改變單選框和復選框的外觀：

1.改變復選框的樣式

/*隱藏默認的復選框*/
input[type="checkbox"] {
display: none;
}
/*使用偽元素來模擬復選框*/
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;
}
/*改變選中狀態下的復選框樣式*/
input[type="checkbox"]:checked + label:before {
content: "\2714";
text-align: center;
font-size: 12px;
line-height: 16px;
color: #fff;
background-color: #007bff;
}

代碼解析：

首先我們將原本的復選框隱藏（display: none;），然后使用偽元素來模擬出一個復選框（input[type="checkbox"] + label:before）。
在選中狀態下，我們將偽元素的內容改為“\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;
}
/*改變選中狀態下的單選框樣式*/
input[type="radio"]:checked + label:before {
content: "";
text-align: center;
font-size: 12px;
line-height: 16px;
color: #fff;
background-color: #007bff;
}

代碼解析：

單選框的改變與復選框類似，只是將border-radius改為50%來設置圓形的外觀，并且在選中狀態下去掉偽元素的內容。

總結：

通過以上兩種樣式更改，我們可以靈活地創建出特定外觀的單選框和復選框。