Make check box like button and clickable

Issue

I've created a checkbox and made it look like a button. I'm facing an issue with this checkbox, its not clickable anywhere on the box. It only activates when click exactly on text. Is it possible to activate the checkbox by clicking anywhere on the button?

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

Solution

Since label is only element that can trigger input, therefor instead of li apply button style to label so it will look and act like button. 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>

Answered By - Abhishek Pandey