如何使用HTML和CSS修改单选按钮及对应标签区域的背景色

实现方案 #

1. 先修正HTML属性匹配问题
   你现有代码中单选框的id属性和对应label的for属性没有对齐，会导致点击标签无法选中单选框，修正后的HTML示例如下：

<!-- ---question1--- -->
<div class="quest">
  <h1>Question 1 of 10</h1>
  <h5>Question 1</h5>
  <div class="choice">
    <input type="radio" id="o1" name="choose" value="o1">
    <label for="o1">Option 1</label><br>
    <input type="radio" id="o2" name="choose" value="o2">
    <label for="o2">Option 2</label><br>
    <input type="radio" id="o3" name="choose" value="o3">
    <label for="o3">Option 3</label><br>
    <input type="radio" id="o4" name="choose" value="o4">
    <label for="o4">Option 4</label>
  </div>
</div>

2. 编写对应CSS样式
   使用:checked伪类匹配选中状态的单选框，再通过相邻兄弟选择器+定位到对应的label修改样式即可，示例代码如下：

/* label基础样式，可根据需求调整内边距、圆角等参数 */
.choice label {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 3px 0;
}
/* hover状态样式，可按需保留或修改 */
.choice label:hover {
  background-color: #f0f0f0;
}
/* 单选框选中时对应label的样式，背景色可替换为你需要的色值 */
.choice input[type="radio"]:checked + label {
  background-color: #b8daff;
  font-weight: 500;
}
/* 如果需要隐藏原生单选框，取消下面这段代码的注释即可 */
/*
.choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
*/

如果需要修改单选框本身的样式，直接给.choice input[type="radio"]添加对应样式规则即可。

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