如何在用户点击后使 div 和 input 标签保持选中状态答案

【问题标题】：How to make div and input tags to stay selected after user clicks如何在用户点击后使 div 和 input 标签保持选中状态
【发布时间】：2019-11-21 08:12:34
【问题描述】：

我有我想要设计的测验脚本，所以当用户点击 div/input 标签时，它将保持选中状态并使用另一种背景颜色。

我所做的只是当我点击 div 时，我可以看到 div 背景发生了变化，
而且，当我点击输入时，我可以看到文本背景颜色正在改变并保持选中状态。
但正如我所说，我希望它保持选中状态。

我还有一个问题，当我点击 div 时，输入没有选择。
只有当我点击输入时，我才能看到它被选中。

代码如下：

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:hover {
  padding: 5px;
  background-color: #ddffff;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:active {
  padding: 5px;
  background-color: #fef9a5;
  cursor: pointer;
  margin-bottom: 7px;
}

.rd {
  cursor: pointer;
}

.rd:checked+label {
  background-color: #fef9a5;
  cursor: pointer;
}

<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" />
    <label><span class="rd">test</span></label>
  </div>
</form>

【问题讨论】：

标签： html css forms input label

【解决方案1】：

嗯，我认为你必须为输入添加一个id，然后为类似于输入的id名称的标签添加属性。然后为标签设置样式以占用其包装器的空间。

如果这回答了您的问题，请检查下面的代码：

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
  position: relative;
  overflow: hidden;
}

.quest:hover {
  padding: 5px;
  background-color: #ddffff;
  cursor: pointer;
  margin-bottom: 7px;
}

.quest:active {
  padding: 5px;
  background-color: #fef9a5;
  cursor: pointer;
  margin-bottom: 7px;
}

.rd {
  cursor: pointer;
  display: inline-block;
  position: relative;
  z-index: 1;
}

label {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 30px 0;
}

.rd:checked + label {
  background-color: #fef9a5;
  cursor: pointer;
}

<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" id="test"/>
    <label for="test"><span class="rd">test</span></label>
  </div>
</form>

【讨论】：

嗯，很高兴它对您有所帮助 :)，那么您认为这是一个答案吗？
你明白了！谢谢！

【解决方案2】：

您可以考虑在标签上添加一个伪元素来模拟您的背景。诀窍是让它相对于 div 元素而不是标签：

.quest {
  padding: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  margin-bottom: 7px;
  position:relative;
  z-index:0;
}

.quest:hover {
  background-color: #ddffff;
}

.rd {
  cursor:pointer;
}

.rd:checked+label {
  background-color: #fef9a5;
  cursor: pointer;
}
.rd:checked+label:before,
.quest:active label:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background-color: #fef9a5;
}

<form>
  <div class="quest">
    <input type="radio" name="test" class="rd" />
    <label><span class="rd">test</span></label>
  </div>
</form>

【讨论】：

当我只点击输入 itef 时它正在工作。当我单击 div 以保持选中状态时，我想实现这一点。