html单选按钮怎么设置

HTML单选按钮是Web开发中常用的控件，用于让用户从一组选项中选择一个。下面我们来了解一下如何设置HTML单选按钮。

<input type="radio" name="option" value="1" />选项1
<input type="radio" name="option" value="2" />选项2
<input type="radio" name="option" value="3" />选项3

以上代码片段展示了三个单选按钮，它们的属性都类似，只是value属性不同。其中，type属性为radio，表示这是一个单选按钮。name属性为option，它们的值相同，表示这些单选按钮属于同一组，只能选择一个。value属性则表示每个选项具体的取值。

在实际开发中，我们通常会在label标签内部包裹住单选按钮：

<label>
  <input type="radio" name="option" value="1" />选项1
</label>
<label>
  <input type="radio" name="option" value="2" />选项2
</label>
<label>
  <input type="radio" name="option" value="3" />选项3
</label>

这样做的好处是可以让用户点击label文字时也可以选中对应的单选按钮，增加用户的交互体验。代码也更加简洁整洁。

在CSS中，我们可以通过样式设置单选按钮的外观，例如：

input[type="radio"] {
  /* 设置单选按钮的方框和圆圈的颜色 */
  border: 1px solid #ccc;
  border-radius: 50%;
}

input[type="radio"]:checked {
  /* 当单选按钮被选中时，改变它的颜色 */
  background-color: #F00;
  border-color: #F00;
}

以上代码片段会将单选按钮的方框变为灰色，圆圈变为白色。当单选按钮被选中时，将圆圈的边框和背景色都改变成了红色。