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

Question

I have been banging my head against the wall on this one for a while and can't seem to find how to do this. I have a card with two rows (card-body) classes. each row represents a radio button (input) with a corresponding label. When the user clicks the radio button I want the background to change colors. Right now that is working, but the background is only working for the label and not the whole div that contains the card row. I'm looking for a HTML/CSS-only answer, as I think it's probably something simple that I'm doing wrong. Thanks!

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

You need to set your labels to display: block with width of 100%, like so:

 .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>