css单选框代码怎么写

CSS 单选框是用于用户在多项选择中只能选择一项的控件。实现单选框的方式有很多，但是这里我们将会展示最常见的一种。

首先，我们需要在 HTML 中创建一个单选框。以下是一个示例：

<label>
  <input type="radio" name="gender" value="male"> Male
</label>

<label>
  <input type="radio" name="gender" value="female"> Female
</label> 

在这个示例中，我们使用了 <input type="radio"> 元素来创建单选框。我们为每个单选框元素定义了一个相同的 name 属性，以确保用户只能选择其中之一。我们还可以使用 value 属性为单选框定义不同的值。

接下来，我们使用 CSS 对单选框进行样式设置。要改变单选框的外观，我们需要对其默认样式进行更改。以下是一个示例 CSS 代码块：

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  outline: none;
  transition: border-color 0.2s ease-out;
}

input[type="radio"]:checked {
  border-color: #2e9afe;
} 

在上面的代码中，我们为单选框设置以下 CSS 样式：

• -webkit-appearance: none;、 -moz-appearance: none; 和 appearance: none; 用于去掉单选框默认样式。

• border-radius: 50%; 用于将单选框变成圆形。

• width: 16px; 和 height: 16px; 用于定义单选框的尺寸。

• border: 2px solid #ccc; 用于定义单选框的边框。

• outline: none; 用于去掉单选框获得焦点时默认的描边样式。

• transition: border-color 0.2s ease-out; 用于定义单选框的过渡样式。

除了上面的样式，我们还为选中的单选框定义了一个特殊的样式。当用户选中单选框时，它的边框将会变为蓝色。这是通过以下 CSS 样式来实现的：

input[type="radio"]:checked {
  border-color: #2e9afe;
} 

最后，我们已经成功地创建了一个可自定义样式的 CSS 单选框。通过使用这个示例，您可以掌握如何创建单选框，并修改它们的外观。