时间戳

首页 > 解决方案 > 如何更改复选框输入样式，以便用户点击标签而不是实际框？

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

问题描述

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

这是我所拥有的：带有可见框的当前视图和带有隐藏框的当前视图

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

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

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

标签： htmlcsscheckboxinput

解决方案

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

那是因为您没有正确地将标签与输入字段相关联……</p> 

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

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

推荐阅读