[分享]css单选按钮样式圆圈点

CSS 单选按钮样式可以让网页或应用程序显示出更加美观和易于使用的界面。其中，可以通过在样式表中设置圆圈和点的样式，来实现单选按钮的不同效果。以下是一些可能会用到的代码：input { display...

CSS 单选按钮样式可以让网页或应用程序显示出更加美观和易于使用的界面。其中，可以通过在样式表中设置圆圈和点的样式，来实现单选按钮的不同效果。以下是一些可能会用到的代码：

input[type="radio"] {
    display: none;
}

input[type="radio"] + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #ccc;
}

input[type="radio"]:checked + label:before {
    background-color: #4CAF50;
}

input[type="radio"] + label:after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: -28px;
    margin-top: 5px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #ccc;
}

input[type="radio"]:checked + label:after {
    background-color: #4CAF50;
} 

以上代码中，input[type="radio"] { display: none; }指定隐藏原始单选按钮。input[type="radio"] + label:before 添加了一个圆圈，而且选中状态时为绿色。input[type="radio"] + label:after 添加了一个白点，选中状态时为绿色。其中，label:before 和 label:after 是一个伪元素，可用 content: "" 来定义。

需要注意的是，以上 CSS 代码可能会因浏览器或设备的不同而略有差异。使用前最好进行兼容性测试。