CSS單選方框按鈕樣式可以為網站和應用程序增添新鮮感和精致度。下面就為大家介紹一下如何使用CSS樣式來創建單選方框按鈕。

input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="radio"]:focus {
outline: none;
}
input[type="radio"]:checked + label {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
input[type="radio"] + label {
display: inline-block;
margin-right: 10px;
line-height: 1.25;
cursor: pointer;
padding: .5rem .75rem;
border: 1px solid #007bff;
color: #007bff;
border-radius: 3px;
transition: all .3s ease;
}

以上代碼中，首先使用了appearance: none來移除了單選按鈕的默認外觀，并使用label標簽來包裝單選按鈕。

使用:focus來移除單選按鈕的選定，使它不再有藍色輪廓線。通過:checked和+選擇器來控制選中狀態下單選按鈕的樣式。使用了顏色、背景顏色、外邊框顏色等屬性來設置樣式。

在此基礎上，可以根據自己的需求來修改單選按鈕的樣式。這種簡單又實用的單選方框按鈕樣式能夠大大提升用戶體驗，為您的網站和應用程序增添新的視覺感受。