如何將可點擊區域應用於整個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>