Make check box like button and clickable-CodePudding

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 >
  <li >
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li >
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li >
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li >
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li >
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

CodePudding user response：

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 >
  <li >
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li >
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li >
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li >
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li >
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

CodePudding user response：

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 >
  <li >
    <input type="checkbox" id="cat1" name="cat1" value="Business">
    <label for="cat1">Business</label>
  </li>
  <li >
    <input type="checkbox" id="cat2" name="cat2" value="Animals">
    <label for="cat2">Animals</label>
  </li>
  <li >
    <input type="checkbox" id="cat3" name="cat3" value="Technology">
    <label for="cat3">Technology</label>
  </li>
  <li >
    <input type="checkbox" id="cat4" name="cat4" value="Industry">
    <label for="cat4">Industry</label>
  </li>
  <li >
    <input type="checkbox" id="cat5" name="cat5" value="Food">
    <label for="cat5">Food</label>
  </li>
</ul>

CodePudding user response：

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