在前端开发中，单选框（Radio Button）是常用的表单元素之一。它允许用户从多个选项中选择一个选项，但在默认情况下，它们可能并不总是很好看。我们可以通过 CSS 样式来自定义单选框的外观。
基本样式
对于单选框，我们通常会隐藏原生的输入框，并用样式的方式来模拟出单选框的外观。通常的做法是将 元素隐藏，添加一个带样式的标签，例如
以下是一个基本的 HTML 结构：
上面的例子中，我们有两个单选框，每个单选框都与一个标签相关联。请注意，这里的 for 属性与相应的 元素的 id 属性相同。
我们可以将 元素隐藏起来，让标签元素成为单选框的代表。使用以下 CSS 样式：
input[type="radio"] {
display: none;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
user-select: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
}
input[type="radio"]:checked + label:before {
content: "\2713";
color: #fff;
background-color: #2196F3;
text-align: center;
line-height: 16px;
}如你所见，我们使用 display: none; 来隐藏原生的 元素，并用一个带样式的标签来代替它。每个标签都有一个相应的 id 属性与其相关联的 元素。在样式中，我们定义了一些基本的样式，例如将标签设置为 display: inline-block; 以使它们水平排列在一行，添加了一定的填充和外边距等。
最重要的是，在样式中，我们定义了 :before 伪元素来模拟出未选择时的圆形边框，并使用 content 属性插入了一个 Unicode 符号来表示选中状态。在选中状态下，我们可以使用 :checked 选择器来改变圆形边框的颜色、背景颜色等。
更多样式
除了基本样式，我们还可以根据需要自定义单选框的外观。以下是一些想法：
- 更改选中状态时的圆形边框颜色和大小。
- 更改圆形边框的形状。
- 更改选中状态下的符号（默认为 Unicode 符号）。
- 向标签添加图标或其他元素。
例如，我们可以使用下面的样式来更改圆形边框的形状：
label:before {
/* ... */
border-radius: 4px; /* 设置为正方形 */
}我们还可以使用下面的样式来添加图标：
label:before {
/* ... */
background-image: url("path/to/icon.svg");
background-repeat: no-repeat;
background-size: 16px 16px; /* 图标的大小 */
background-position: center; /* 图标的位置 */
}从上面的示例中，我们可以看到，通过自定义 CSS 样式，我们可以完全改变单选框的外观，并使其适合于各种设计和需求。