Question

我正试图建立一个猜词游戏，我希望用户有多个“词库”可供选择。我正在使用包装在标签中的复选框进行选择。我想在选中复选框时在标签元素周围放置边框，因为理想情况下，我希望隐藏/不显示实际的复选框。

我尝试仅在使用：checked检查时在按钮上添加边框，但这不起作用。我也尝试过在线寻找解决方案，但是我能够挖掘出的大多数解决方案都只是在实际包装盒中添加样式，而不是在标签上添加样式，并且我希望整个标签周围都带有边框，以便我可以隐藏复选框，但仍指出哪个“银行”。

<form id="wordBanks">
    <label for="perksCheck">Perks<input type="checkbox" id="perksCheck" selected></label>
    <label for="equipmentCheck">Euipment<input type="checkbox" id="equipmentCheck"></label>
</form>

我也粘贴了CSS，但是由于我的代码不起作用，因此将其省略。不过，可以根据要求提供。

Answer 1

除了将复选框包装在标签内之外，您还可以执行以下操作：

<input type="checkbox" id="perksCheck" checked>
<label for="perksCheck">Perks</label>

在CSS中，如果使用adjacent sibling combinator选中了标签上方的复选框，则可以将标签定位。

input[type=checkbox]:checked + label {
    border: 1px solid red;
}

Answer 2

我的解决方案通常是将标签包裹在一个跨度中，然后将复选框放置在标签之前。

<form id="wordBanks">
         <span><input type="checkbox" id="perksCheck" checked><label for="perksCheck">Perks</label></span>
         <span><input type="checkbox" id="equipmentCheck"><label for="equipmentCheck">Euipment</label></span>   
</form>

您甚至可以避免将其包装成一个范围，但是我发现更容易推断何时具有多个属性（例如，开始抛出可访问性属性，并且您的元素将在大多数屏幕上换行）。

此示例不会丢失任何功能，您可以使用以下方式设置标签的样式：

    input[type=checkbox]:checked + label

旁注：复选框是“已选中”而不是“已选中”。

Answer 3

您不需要将输入内容包装在标签内。

仅突出显示相邻标签

如果要突出显示<label>并且不想使用JS，则必须更改元素的顺序。稍后再使用<input>' first and`。因为在CSS中，当我们使用

input[type="checkbox"]:checked + label，它希望<label>是输入的下一个元素，也就是同级。

这是您可以尝试的

input[type="checkbox"]:checked + label {
  border: 2px solid black;
}

<form id="wordBanks">
  <input type="checkbox" id="perksCheck" selected> 
  <label for="perksCheck">Perks </label>
  <input type="checkbox" id="equipmentCheck">
  <label for="equipmentCheck">Euipment</label>
</form>

仅突出显示复选框

如果目标是突出显示该复选框，则可以向其中添加box-shadow。

input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px black;
}

<form id="wordBanks">
  <label for="perksCheck">Perks<input type="checkbox" id="perksCheck" selected></label>
  <label for="equipmentCheck">Euipment<input type="checkbox" id="equipmentCheck"></label>
</form>

在这里https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

了解更多

选中复选框时，如何在其标签上添加边框？

3 个答案: