Сделайте флажок похожим на кнопку и кликабельным ⇐ Html

[Anonymous]

Я создал флажок и сделал его похожим на кнопку. У меня возникла проблема с этим флажком: его нигде нельзя щелкнуть. Он активируется только при нажатии точно на текст. Можно ли активировать флажок, нажав в любом месте кнопки?

Код: Выделить всё

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

Код: Выделить всё

[list]
[*]

Business

[*]

Animals

[*]

Technology

[*]

Industry

[*]

Food

[/list]

Подробнее здесь: https://stackoverflow.com/questions/722 ... -clickable