css的表单单选

当我们需要在网站或应用程序中收集用户数据时，表单是很重要的一种工具。其中单选框（radio buttons）被广泛使用，因为它可以让用户从多个选择中获取一个选项。

单选框的HTML代码如下所示：

<input type="radio" name="gender" value="male"> Male<br><input type="radio" name="gender" value="female"> Female

在这个例子中，我们创建了两个单选框，以便用户在男性和女性之间选择。注意name属性，它们连通单选框一起，以确保当用户选择其中一个选项时，其他选项将被自动取消选择。

现在，让我们看看如何在CSS中自定义这些单选框。

首先，我们可以将单选框的外观更改为圆形而不是默认的方形。 然后，我们可以更改选定后的颜色，使其更加吸引人。

input[type="radio"] {
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #333;
  transition: 0.2s all linear;
  outline: none;
}
input[type="radio"]:checked {
  background-color: #333;
  border-color: #333;
}

在这个CSS例子中，我们使用了伪类: checked来定位选中的单选按钮。 我们还更改了边框半径（使它变成圆形），定义了选项框的宽高和边框颜色。 我们还添加了一个过渡效果，以确保用户能够看到状态的变化。

总而言之，单选框是网页表单中不可或缺的组件之一。 使用CSS可以轻松地自定义样式，并增加用户交互性。