'Make check box like button and clickable

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>

html css checkbox

Solution 1:^[1]

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>

Solution 2:^[2]

I would just move your li styles to your label:

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

Solution 3:^[3]

set your label to 'display:block'; ...width and height should be the same as the li, set text-align:center, and line-height same as height and you're good to go

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Pete
Solution 3	Samuel Ndubueze

'Make check box like button and clickable

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]