Программисты Html
Anonymous
Сделайте флажок похожим на кнопку и кликабельным
Сообщение
Anonymous » 19 дек 2025, 02:30
Я создал флажок и сделал его похожим на кнопку. У меня возникла проблема с этим флажком: его нигде нельзя щелкнуть. Он активируется только при нажатии точно на текст. Можно ли активировать флажок, нажав в любом месте кнопки?
Код: Выделить всё
.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
1766100602
Anonymous
Я создал флажок и сделал его похожим на кнопку. У меня возникла проблема с этим флажком: его нигде нельзя щелкнуть. Он активируется только при нажатии точно на текст. Можно ли активировать флажок, нажав в любом месте кнопки? [code].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; }[/code] [code][list] [*] Business [*] Animals [*] Technology [*] Industry [*] Food [/list][/code] Подробнее здесь: [url]https://stackoverflow.com/questions/72258062/make-check-box-like-button-and-clickable[/url]