CSS自制單選框是一種非常實用的技術，它可以讓網頁設計者更加自由地掌控網頁的界面表現。下面我們就來看一下如何使用CSS制作出漂亮的單選框。

input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 50%;
vertical-align: bottom;
border: 2px solid #ccc;
}
input[type="radio"]:checked + label:before {
background-color: #f00;
border-color: #f00;
color: #fff;
}
input[type="radio"] + label {
display: inline-block;
}

該段代碼的主要作用是將默認的單選框隱藏，使用CSS自己定義樣式來替代。首先定義一個input[type="radio"]選擇器，將其display屬性設置為none，讓原來的單選框隱藏。接著使用input[type="radio"] + label:before選擇器來設置樣式，給每個單選框添加一個圓形的圖標。這里使用了content屬性來向樣式之前添加一個空元素，之后將樣式設為inline-block即可。使用border-radius屬性設置為50%實現圓形效果，并使用border屬性設置邊框。最后定義了選中狀態下的樣式，更改background-color、border-color和color屬性即可實現效果。最后一個選擇器是將label設為inline-block，讓每個單選框都在同一行。

通過這些方式，我們可以根據自己的需求和網站主題來制作出漂亮的單選框樣式，這不僅可以提高頁面的美觀度，還能夠讓用戶更加方便地操作。所以對于網頁設計者來說，掌握CSS自制單選框的技術是非常重要的。