如何让点击区域覆盖整个Div而非仅Label？

嘿，这个问题我之前也碰到过，纯HTML/CSS完全能搞定，不用碰JS！核心就是利用CSS的伪类和选择器来关联单选按钮和它所在的整行容器，下面给你两种靠谱的方案：

方案一：用CSS :has() 伪类（现代浏览器首选） #

这个方案结构最清晰，:has() 是CSS的父选择器，能直接选中包含选中状态单选按钮的那一行容器。

首先是HTML结构：

<div class="card">
  <div class="card-body">
    <input type="radio" name="option" id="option1" class="radio-input">
    <label for="option1" class="radio-label">选项 1</label>
  </div>
  <div class="card-body">
    <input type="radio" name="option" id="option2" class="radio-input">
    <label for="option2" class="radio-label">选项 2</label>
  </div>
</div>

然后是CSS代码：

/* 隐藏原生单选按钮，让交互更美观 */
.radio-input {
  position: absolute;
  opacity: 0;
}

/* 给每行容器设置基础样式，加个过渡动画更丝滑 */
.card-body {
  padding: 1rem;
  position: relative;
  transition: background-color 0.2s ease;
  /* 可选：加个边框区分行 */
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* 让label占满整行，点击任何地方都能触发单选按钮 */
.radio-label {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* 关键：当行内的单选按钮被选中时，改变整行背景色 */
.card-body:has(.radio-input:checked) {
  background-color: #e3f2fd; /* 你可以换成任何喜欢的颜色 */
}

方案二：兼容旧浏览器（不用:has()） #

如果需要支持不兼容:has()的旧浏览器（比如Chrome 105之前的版本），可以用相邻兄弟选择器来实现，稍微调整一下结构：

HTML结构：

<div class="card">
  <input type="radio" name="option" id="option1" class="radio-input">
  <div class="card-body">
    <label for="option1">选项 1</label>
  </div>

  <input type="radio" name="option" id="option2" class="radio-input">
  <div class="card-body">
    <label for="option2">选项 2</label>
  </div>
</div>

CSS代码：

.radio-input {
  position: absolute;
  opacity: 0;
}

.card-body {
  padding: 1rem;
  position: relative;
  transition: background-color 0.2s ease;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* 让label覆盖整行，确保点击任何区域都能触发单选 */
.card-body label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

/* 关键：单选按钮被选中时，给后面的.card-body加背景色 */
.radio-input:checked + .card-body {
  background-color: #e3f2fd;
}

两种方案都能实现你要的效果：点击整行（或者单选按钮）时，整个.card-body的背景色变化，完全不用JavaScript。

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