如何仅用CSS修改选中答案的背景色及unchecked属性的作用

1. 单选框选中后修改选项颜色失效原因及解决方法 #

你写的CSS不生效主要有两个原因：

• 原生<input type="radio">属于浏览器内置表单控件，默认样式优先级极高，直接给它设置background属性只会作用于单选按钮本身的小圆形区域，无法修改整个选项条的背景色，部分浏览器甚至根本不支持修改原生单选框的背景样式
• 你的选择器命中的是单选框元素本身，而你要修改的是包含选项文本的整个.choices（label标签）的样式

另外你的代码中label的for属性值和对应input的id值不匹配，会导致点击选项文本无法选中单选框，建议修改为对应值，比如<input type="radio" id="q1_opt1" name="q1" value="o1">，对应label的for="q1_opt1"。

正确实现代码 #

如果你的运行环境支持CSS :has() 选择器（目前主流现代浏览器都已支持），可以直接用以下代码实现选中后整个选项背景变黄的效果：

/* 选中包含已勾选单选框的.choices标签 */
.choices:has(input[type="radio"]:checked) {
  background: yellow;
  display: block; /* 可选，让背景占满整行 */
  padding: 2px 4px; /* 可选，增加内边距让样式更美观 */
}

如果需要兼容旧版本浏览器，可以调整HTML结构把单选框放到label标签外面，用相邻兄弟选择器实现：

input[type="radio"]:checked + .choices {
  background: yellow;
}

2. unchecked="checked"属性的效果 #

HTML标准中没有定义unchecked这个表单属性，单选框的选中状态只有checked这一个布尔属性控制。你添加的unchecked="checked"属于自定义无效属性，浏览器会直接忽略该属性，不会产生任何效果，单选框默认还是未选中状态。

内容的提问来源于stack exchange，提问作者SoDa_Nguyen