CSS 更改单选按钮样式

在 web 开发中，我们经常需要自定义单选按钮的样式，让它们更符合我们的 UI 设计。本文将介绍使用 CSS 来更改单选按钮样式的方法。

HTML 结构

单选按钮的 HTML 结构非常简单，通常是使用 input 元素的 type 属性为 "radio"，再配合一个 label 元素：

<label for="radio-1">选项1</label>
<input type="radio" name="radio-group" id="radio-1">

<label for="radio-2">选项2</label>
<input type="radio" name="radio-group" id="radio-2">

<label for="radio-3">选项3</label>
<input type="radio" name="radio-group" id="radio-3">

在上述代码中，name 属性用于表示这些单选按钮属于同一组，只有其中一个可以被选中。

CSS 样式

隐藏原始单选按钮

首先，我们需要先隐藏原始的单选按钮，使用 display:none 或者把它们移出屏幕：

input[type="radio"] {
    position: absolute;
    left: -9999px;
}

自定义单选按钮样式

接下来，我们使用伪元素 ::before 或者 ::after 来创建自定义的单选按钮，例如使用一个球形的样式：

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

增加选中状态的样式

最后，我们需要在选中的单选按钮上添加特殊的样式，例如使用一个填充颜色表示选中状态：

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

完整代码示例

<label for="radio-1">选项1</label>
<input type="radio" name="radio-group" id="radio-1">

<label for="radio-2">选项2</label>
<input type="radio" name="radio-group" id="radio-2">

<label for="radio-3">选项3</label>
<input type="radio" name="radio-group" id="radio-3">

/* 隐藏原始单选按钮 */
input[type="radio"] {
    position: absolute;
    left: -9999px;
}

/* 自定义单选按钮样式 */
input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    margin-right: 10px;
}

/* 增加选中状态的样式 */
input[type="radio"]:checked + label::before {
    background-color: #336699;
}

以上代码将显示圆形的单选按钮，选中状态时会显示一个填充颜色。你可以根据自己的需要，修改样式代码来达到不同的效果。