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
伪元素来替换选中的单选框图标的样式。