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

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，只将名称放在那里是不够的。

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

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

Answer 2

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

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

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