CSS單選框和復選框是網頁設計中常用的交互元素，可以讓用戶選擇不同的選項。下面我們來看看如何使用CSS樣式來美化這些元素。

/*單選框樣式*/
label.radio {
position: relative;
display: inline-block;
padding-left: 25px;
margin-right: 15px;
font-size: 16px;
cursor: pointer;
}
label.radio:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 50%;
}
label.radio input[type="radio"] {
opacity: 0;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
label.radio input[type="radio"]:checked:before {
background: #069;
}
/*復選框樣式*/
label.checkbox {
position: relative;
display: inline-block;
padding-left: 25px;
margin-right: 15px;
font-size: 16px;
cursor: pointer;
}
label.checkbox:before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 16px;
height: 16px;
border: 1px solid #999;
border-radius: 2px;
}
label.checkbox input[type="checkbox"] {
opacity: 0;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
label.checkbox input[type="checkbox"]:checked:before {
content: "\2713";
font-size: 16px;
color: #069;
text-align: center;
line-height: 16px;
}

通過上面的樣式代碼，我們可以讓單選框和復選框具有更加美觀的外觀效果。代碼中通過:before偽類來實現選中狀態下的樣式效果，同時給元素添加了hover樣式來提高用戶體驗。實現CSS單選框和復選框美化并不難，只需熟悉CSS樣式的基本用法即可，相信讀者們也能輕松掌握。