当特定的单选按钮被选中时,CSS会发生变化的方法是使用选中伪类(:checked)。
选中伪类(:checked)用于选择已被选中的表单元素,包括单选按钮、复选框和下拉列表等。通过为选中的元素应用CSS样式,可以实现在特定选项被选中时改变其外观。
以下是使用选中伪类的示例代码:
HTML代码:
<input type="radio" name="option" id="option1">
<label for="option1">选项1</label>
<input type="radio" name="option" id="option2">
<label for="option2">选项2</label>
<div id="result">结果</div>
CSS代码:
input[type="radio"]:checked + label {
color: red;
}
input[type="radio"]:checked ~ #result {
background-color: yellow;
}
在上述示例中,当选中单选按钮时,其相邻的标签(label)的颜色会变为红色,而ID为"result"的元素的背景颜色会变为黄色。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云