使复选框像按钮一样可点击

Question

我创建了一个复选框并使其看起来像一个按钮。我遇到了这个复选框的问题，它在框的任何地方都不可点击。它仅在准确单击文本时激活。是否可以通过单击按钮上的任意位置来激活复选框？

.nft-item-category-list input[type=checkbox]+label {
  display: inline-block;
  margin: 0.2em 0;
  cursor: pointer;
  padding: 0.2em 0;
  text-align: left;
  font: normal normal normal 14px/14px Poppins;
  color: #8E8E93;
}

.nft-item-category-list input[type=checkbox] {
  display: none;
}

.nft-item-category-list input[type=checkbox]+label:before {
  content: "✓";
  display: none;
  width: 1em;
  height: 1em;
  padding-left: 0.1em;
  padding-bottom: 0.10em;
  margin-right: 0.5em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  color: #000;
  border-radius: 100%;
  background-color: #8E8E93;
}

.nft-item-category-list input[type=checkbox]+label:active:before {
  transform: scale(0);
  color: #000;
}

.nft-item-category-list input[type=checkbox]:checked+label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #000;
}

.nft-item-category-list input[type=checkbox]:disabled+label:before {
  transform: scale(1);
  border-color: #aaa;
}

.nft-item-category-list input[type=checkbox]:checked:disabled+label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

.nft-item-category-list input[type=checkbox]:checked+label {
  color: #30D158;
  transition: all .2s linear;
}

ul.nft-item-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
}

li.nft-item-category-list {
  background: #2C2C2E 0% 0% no-repeat padding-box;
  border-radius: 5px;
  width: 184px;
  height: 41px;
  text-align: center;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

<ul class="nft-item-categories">
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

Answer 1

将您的标签设置为'display:block'； ...宽度和高度应该与 li 相同，设置 text-align:center，并且 line-height 与高度相同，你很高兴去

Answer 2

由于标签是唯一可以触发输入的元素，因此将按钮样式应用到 label 而不是 li 所以它看起来和行为都像按钮。 li.nft-item-category-list label

.nft-item-category-list input[type=checkbox]+label {
  margin: 0.2em 0;
  cursor: pointer;
  padding: 0.2em 0;
  text-align: left;
  font: normal normal normal 14px/14px Poppins;
  color: #8E8E93;
}

.nft-item-category-list input[type=checkbox] {
  display: none;
}

.nft-item-category-list input[type=checkbox]+label:before {
  content: "✓";
  display: none;
  width: 1em;
  height: 1em;
  padding-left: 0.1em;
  padding-bottom: 0.10em;
  margin-right: 0.5em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  color: #000;
  border-radius: 100%;
  background-color: #8E8E93;
}

.nft-item-category-list input[type=checkbox]+label:active:before {
  transform: scale(0);
  color: #000;
}

.nft-item-category-list input[type=checkbox]:checked+label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #000;
}

.nft-item-category-list input[type=checkbox]:disabled+label:before {
  transform: scale(1);
  border-color: #aaa;
}

.nft-item-category-list input[type=checkbox]:checked:disabled+label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

.nft-item-category-list input[type=checkbox]:checked+label {
  color: #30D158;
  transition: all .2s linear;
}

ul.nft-item-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
}

li.nft-item-category-list label{
  background: #2C2C2E 0% 0% no-repeat padding-box;
  border-radius: 5px;
  width: 184px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
}


li.nft-item-category-list{
list-style: none;
}

<ul class="nft-item-categories">
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

Answer 3

我只想将您的 li 样式移动到您的标签中：

.nft-item-category-list input[type=checkbox]+label {
  cursor: pointer;
  font: normal normal normal 14px/14px Poppins;
  color: #8E8E93;
  background: #2C2C2E;
  border-radius: 5px;
  width: 184px;
  height: 41px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nft-item-category-list input[type=checkbox] {
  display: none;
}

.nft-item-category-list input[type=checkbox]+label:before {
  content: "✓";
  display: none;
  width: 1em;
  height: 1em;
  padding-left: 0.1em;
  padding-bottom: 0.10em;
  margin-right: 0.5em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
  color: #000;
  border-radius: 100%;
  background-color: #8E8E93;
}

.nft-item-category-list input[type=checkbox]+label:active:before {
  transform: scale(0);
  color: #000;
}

.nft-item-category-list input[type=checkbox]:checked+label:before {
  background-color: MediumSeaGreen;
  border-color: MediumSeaGreen;
  color: #000;
}

.nft-item-category-list input[type=checkbox]:disabled+label:before {
  transform: scale(1);
  border-color: #aaa;
}

.nft-item-category-list input[type=checkbox]:checked:disabled+label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}

.nft-item-category-list input[type=checkbox]:checked+label {
  color: #30D158;
  transition: all .2s linear;
}

ul.nft-item-categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 15px;
  align-items: center;
}

li.nft-item-category-list {
  list-style: none;
}

<ul class="nft-item-categories">
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li class="nft-item-category-list">
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

使复选框像按钮一样可点击

Make check box like button and clickable

html

css

checkbox