html单选按钮变色

要为HTML单选按钮添加颜色变化效果，你可以使用CSS来实现。以下是一种常见的做法：

首先，在HTML中创建一个单选按钮组：

<input type="radio" name="color" id="red">
<label for="red">Red</label>

<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>

<input type="radio" name="color" id="green">
<label for="green">Green</label>

接下来，使用CSS为单选按钮添加样式，并定义选中状态的颜色：

input[type="radio"] {
  display: none; /* 隐藏原始的单选按钮 */
}

input[type="radio"] + label {
  padding: 5px 10px;
  border: 1px solid #ccc;
}

input[type="radio"]:checked + label {
  background-color: #f00; /* 设置选中状态下的背景颜色为红色 */
  color: #fff; /* 设置选中状态下的文本颜色为白色 */
}

通过上述CSS代码，当单选按钮被选中时，相应的标签(label)会应用选中状态的样式。你可以根据需要调整样式以满足自己的设计要求。

注意：以上代码只是一种示例，你可以根据自己的需求进行修改和扩展。希望能对你有所帮助！