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％的块，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: