时间戳

首页 > 解决方案 > 用户点击后如何使 div 和输入标签保持选中状态

html - 用户点击后如何使 div 和输入标签保持选中状态

问题描述

我有我想设计的测验脚本，所以当用户点击 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>

标签： htmlcssformsinputlabel

解决方案

嗯，我认为你必须为输入添加一个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>

推荐阅读