CSS的美妙之處在于可以通過簡單的代碼增強用戶的設計體驗。在許多表單中，單選框是最常用的元素之一。然而，它們的默認外觀常常過于普通，缺少吸引人的視覺效果。下面是一些讓你的單選框變得好看的CSS樣式。

/* 第一種樣式 */
input[type="radio"] {
position: absolute;
visibility: hidden;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border-radius: 50%;
background: #bdc3c7;
}
input[type="radio"]:checked + label:before {
background: #2c3e50;
}
/* 第二種樣式 */
input[type="radio"] {
position: absolute;
opacity: 0;
z-index: -1;
}
input[type="radio"] + label {
position: relative;
padding-left: 25px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 50%;
width: 16px;
height: 16px;
margin: -8px 0 0;
border: 2px solid #ccc;
border-radius: 50%;
background: #fff;
}
input[type="radio"]:checked + label:before {
color: #f3f3f3;
background: #2c3e50;
border-color: #2c3e50;
}
/* 第三種樣式 */
input[type="radio"] {
display: none;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
box-sizing: border-box;
border: 2px solid #bdc3c7;
border-radius: 50%;
width: 1em;
height: 1em;
margin-right: 0.5em;
vertical-align: -0.15em;
transition: all 250ms ease;
}
input[type="radio"]:checked + label:before {
background: #2c3e50;
border-color: #2c3e50;
color: #f3f3f3;
}

這些樣式只是冰山一角，你可以根據自己的需求和偏好自定義單選框的外觀。CSS的強大之處在于它可以讓你的設計表現得如此出色，而僅需極少的代碼。在你的下一個項目中試試這些樣式，以及更多有趣的CSS技巧。