css中设置单选框

CSS中设置单选框通常是通过伪元素来完成的。我们可以使用伪元素::before和::after来实现自定义单选框样式。

input[type=radio] {
    display: none; /* 隐藏原始的单选框 */
}
input[type=radio] + label:before {
    content: "\\f111"; /* 使用Font Awesome的图标来替代原始的单选框 */
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 5px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    color: #ccc;
    border: 1px solid #ccc;
    border-radius: 50%;
}
input[type=radio]:checked + label:before {
    content: "\\f192"; /* 使用Font Awesome的图标来代替选中的单选框 */
    color: #fc0;
    border: 1px solid #fc0;
}

在上面的代码中，我们首先隐藏了原始的单选框。然后，我们使用::before伪元素来创建一个圆圈的图标，并把它放在原始单选框的标签前面。使用content属性来指定伪元素的内容，使用font-family将其设置为Font Awesome字体，使用width和height来指定图标的大小，使用line-height和text-align来使图标居中显示，使用color和border来设置圆圈的颜色和边框，使用border-radius来设置边框为圆角。

最后，使用:checked伪类来检查原始单选框是否被选中，并使用::before伪元素来替换选中的单选框图标的样式。