CSS写单选按钮样式

在网页开发中，单选按钮是一种常见的交互元素，用来让用户在几个互斥的选项中进行选择。默认的单选按钮样式并不总是符合我们的设计需求，因此我们经常需要对其进行定制化。

基本样式

在CSS中，我们可以通过一些简单的属性来自定义单选按钮的样式，如背景颜色、边框颜色、大小等。下面是一个基本的单选按钮样式：

input[type="radio"] {
    width: 18px;
    height: 18px;
    border: 2px solid #333;
    border-radius: 50%;
}

input[type="radio"]:checked {
    background-color: #333;
}

在上面的代码中，我们为单选按钮设置了固定的宽度和高度，并添加了一个圆形的边框。当按钮被选中时，背景颜色会变为灰色。这是一个很简单但有效的样式，可以让单选按钮更加美观。

自定义样式

除了基本样式外，我们还可以通过伪元素来实现更加复杂的样式。比如，我们可以使用伪元素来实现一个定制的外观，如下所示：

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

input[type="radio"] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

input[type="radio"] + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 50%;
}

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

在上面的代码中，我们利用了伪元素:before来为单选按钮的label添加一个圆形的样式。当按钮被选中时，圆形变为灰色。这种方式可以让我们更加灵活地定制单选按钮的外观。

完整示例

下面是一个完整的示例代码，展示了如何使用CSS来定制单选按钮的样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        input[type="radio"] {
            display: none;
        }

        input[type="radio"] + label {
            position: relative;
            padding-left: 30px;
            cursor: pointer;
        }

        input[type="radio"] + label:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #333;
            border-radius: 50%;
        }

        input[type="radio"]:checked + label:before {
            background-color: #333;
        }
    </style>
</head>
<body>
    <input type="radio" id="radio1" name="radios">
    <label for="radio1">Option 1</label>

    <input type="radio" id="radio2" name="radios">
    <label for="radio2">Option 2</label>

    <input type="radio" id="radio3" name="radios">
    <label for="radio3">Option 3</label>
</body>
</html>

在上面的示例中，我们使用了伪元素:before来为每个单选按钮的label添加了一个圆形样式，当按钮被选中时，圆形会变为灰色。每个单选按钮的label是通过for属性和对应的id关联起来的。