如何修改考试页面选中单选框对应选项的整体背景色

针对「选中仅文字背景变化」问题 #

你当前的选中样式仅作用在<label>行内元素上，宽度仅适配文字长度，没有铺满整个选项框。修改两处CSS即可：

1. 给label设置块级属性，占满父容器宽度：

label {
  cursor: pointer;
  display: block;
  width: 100%;
}

2. 移除选中样式中重复的padding配置：

.choice input[type="radio"]:checked + label {
  background: rgb(226, 182, 182);
  cursor: default;
}

针对「查看答案后样式冲突」问题 #

你之前通过JS直接给选项容器加行内背景，优先级低于label的选中背景，导致颜色叠加。按如下方式调整：

1. 新增两个CSS规则：

/* 正确答案高亮类 */
.choice.correct {
  background-color: lightgreen;
}
/* 正确选项被选中时，清除label的选中背景，透出父级绿色 */
.choice.correct input[type="radio"]:checked + label {
  background: transparent;
}

2. 修改JS逻辑，用加类的方式替代直接设置行内样式：

function checkAnswers() {
  var elements = document.getElementsByClassName("choice answer");
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.add("correct");
  }
}

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