[分享]css单选框选中颜色

在CSS中，单选框是一种非常常见的表单元素。当用户选中一个单选框时，通常会呈现某种视觉效果。实现这种效果的方法之一是使用CSS中的伪类选择器来控制选中时的样式。下面是一个示例单选框： Option 1...

在CSS中，单选框是一种非常常见的表单元素。当用户选中一个单选框时，通常会呈现某种视觉效果。实现这种效果的方法之一是使用CSS中的伪类选择器来控制选中时的样式。

下面是一个示例单选框：

<input type="radio" name="example" value="1"> Option 1
<input type="radio" name="example" value="2"> Option 2
<input type="radio" name="example" value="3"> Option 3 

在CSS中，选中单选框的伪类选择器是:checked。我们可以通过在样式表中对该选择器进行定义，来实现选中时的效果。

以下示例代码用红色来表示选中的单选框：

input[type="radio"]:checked {
  outline: 2px solid red;
} 

在上面的代码中，我们选择了所有类型为"radio"的输入元素，然后通过:checked选择器来选择选中的单选框。最后，我们设置了一个红色的描边来表示选中。

除了红色，我们也可以使用其他颜色表示选中：

input[type="radio"]:checked {
  outline: 2px solid blue;
}
input[type="radio"]:checked {
  outline: 2px solid green;
} 

总之，使用伪类选择器:checked来控制单选框选中时的颜色是非常简单和灵活的。根据需要，我们可以使用各种颜色和样式来增强用户体验。