html - 选中复选框时，如何为复选框的标签添加边框？

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