如何将可点击区域应用于整个Div，而不仅仅是标签？

Question

我一直在这个墙上敲我的头一段时间，似乎无法找到如何做到这一点。 我有一张卡有两排（卡体）类。 每行代表一个带有相应标签的单选按钮（输入）。 当用户单击单选按钮时，我希望背景更改颜色。 现在它正在工作，但背景只适用于标签，而不是包含卡行的整个div。 我正在寻找一个只支持HTML / CSS的答案，因为我认为这可能是一件很简单的事情，我做错了。 谢谢！

CSS

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.25rem;
}
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}
.pick input[type="radio"] {
  display: none;
  /* comment this line to see the radio buttons */
}

.pick label {
  display: inline-block;
  background-color: red;
}

.pick input[type="radio"]:checked+label {
  background-color: blue;
}
.card {
    border-style: solid;
    border-width: 5px;
}
label {
  display: block;
  width: 100%;
}

HTML

<div class="card">
  <div class="card-body pick" for="i1">
    <input type="radio" name="g1" id="i1" value="you" data-target="r65">
    <label class="ben" for="i1" id="r1">you</label>
  </div>
  <div class="card-body pick" for="i2">
    <input type="radio" name="g1" id="i2" value="me" data-target="r65">
    <label class="ben" for="i2" id="r2">me</label>
  </div>
</div>

JSFiddle： https ：//jsfiddle.net/j3mskfjv/11/

Answer 1

您需要设置要显示的标签：宽度为100％的块，如下所示：

 .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0.25rem; } .card-body { flex: 1 1 auto; } .pick input[type="radio"] { display: none; /* comment this line to see the radio buttons */ } .pick label { display: inline-block; background-color: red; } .pick input[type="radio"]:checked+label { background-color: blue; } .card { border-style: solid; border-width: 5px; } .pick { display: flex; } label { display: block; flex: 1; padding: 1.25rem; } 

 <div class="card"> <div class="card-body pick" for="i1"> <input type="radio" name="g1" id="i1" value="you" data-target="r65"> <label class="ben" for="i1" id="r1">you</label> </div> <div class="card-body pick" for="i2"> <input type="radio" name="g1" id="i2" value="me" data-target="r65"> <label class="ben" for="i2" id="r2">me</label> </div> </div>