單選按鈕和復選按鈕是Web開發中常用的表單元素之一。在CSS中，我們可以使用偽元素和屬性選擇器來修改它們的樣式。

/* 單選按鈕樣式 */
input[type="radio"] {
/* 隱藏原生單選按鈕 */
display: none;
}
label.radio {
/* 設置單選按鈕樣式 */
display: inline-block;
margin-right: 10px;
padding-left: 22px;
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 22px;
}
label.radio:before {
/* 使用偽元素模擬單選按鈕 */
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 5px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: 1px solid #bbb;
}
input[type="radio"]:checked + label.radio:before {
/* 設置選中狀態樣式 */
background-color: #00bfff;
border-color: #00bfff;
}
/* 復選按鈕樣式 */
input[type="checkbox"] {
/* 隱藏原生復選按鈕 */
display: none;
}
label.checkbox {
/* 設置復選按鈕樣式 */
display: inline-block;
margin-right: 10px;
padding-left: 22px;
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 22px;
}
label.checkbox:before {
/* 使用偽元素模擬復選按鈕 */
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 5px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border: 1px solid #bbb;
}
input[type="checkbox"]:checked + label.checkbox:before {
/* 設置選中狀態樣式 */
background-color: #00bfff;
border-color: #00bfff;
}

在單選按鈕樣式中，我們使用偽元素:before來模擬單選按鈕，然后用屬性選擇器選中各個狀態。在復選按鈕樣式中，也是同樣的方式。

通過以上的樣式代碼，我們可以讓表單元素變得更美觀，同時也能增加用戶體驗。