如何更改复选框输入样式，以便用户点击标签而不是实际框？

Question

我正在使用 HTML 和 CSS 创建一个项目，并且我希望有可以使用复选框输入来选择的选项。但是，我想更改样式，以便隐藏实际的框，并且可以点击标签文本来指示选择。我可以通过将其不透明度降低为零来隐藏该框，但我正在努力将不可见的框移动到文本顶部，以便看起来文本正在被点击而不是框。这最终将成为 iOS 应用程序的一部分。

这是我所拥有的：Current view with visible boxes 和 Current view with hidden boxes

隐藏框的外观是我想要的，但要更改背景颜色，用户必须点击文本左侧（不可见框所在的位置）。

这是 HTML：

<div class="full-input preferences">
  <input type="checkbox" name="sports" value="Sports" class="preference"><label for="sports">Sports</label>
  <input type="checkbox" name="pets" value="Pets" class="preference"><label for="pets">Pets</label>
  <input type="checkbox" name="movies" value="Movies" class="preference"><label for="movies">Movies</label>
  <input type="checkbox" name="food" value="Food" class="preference"><label for="food">Food</label>
</div>

还有 CSS：

.preferences {
  display: flex;
  flex-wrap: wrap;
  flex: 2;
}

.preference {
  margin: 0 .5em;
}

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox] + label {
  border: 1px solid #38A3B8;
  padding: .3em;
  border-radius: 5px;
  min-width: 3em;
  text-align: center;
  z-index: 1;
}

input[type=checkbox]:checked + label {
    background: #38A3B8;
    color: white;
}

我尝试过使用绝对定位，但由于某种原因，它导致所有输入只有一个框，而不是每个输入一个框。我还尝试将输入标签放在标签标签中，但从那里从那时起，我无法在检查框时更改背景颜色。

Answer 1

但是要改变背景颜色，用户必须点击文本的左侧（不可见框所在的位置）

那是因为您没有正确将标签与输入字段关联……

<input type="checkbox" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>

for 属性必须引用输入字段的 ID，仅在其中放置 name 是不够的。

<input type="checkbox" id="sports" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>

这样，标签与输入字段正确关联，因此单击标签文本现在将切换复选框状态。

Answer 2

您可以为复选框添加一个填充，使它们看起来不奇怪。 （复选框实际占用的大小）

input[type=checkbox] {
  opacity: 0;
  padding-right: 10px (or whichever size that fits);
}

希望这个答案可以帮助您解决问题（以任何方式）。
非常感谢。