提问人：dckiller 提问时间：5/17/2021 最后编辑：Ghostdckiller 更新时间：5/18/2021 访问量：133
仅在 CSS 中使用单击切换更改图标的颜色
Change the color of the icon with click toggle only in CSS
问：
我正在使用此代码。我也希望标签的颜色发生变化。display: block
label.divcheck { color:blue; text-decoration:underline; }
input.divcheck { display:none; }
input.divcheck + div { display:none; }
input.divcheck:checked + div { display:block;}<label class="divcheck" for="navigation">Button Nav</label>
<label class="divcheck" for="other">Button Other</label>
<input type="checkbox" class="divcheck" id="navigation"/>
<div class="navigation">
Foo
</div>
<input type="checkbox" class="divcheck" id="other"/>
<div class="navigation">
Other
</div>答：
1赞
BOZ
5/17/2021
#1
在不使用 JavaScript 的情况下执行此操作的唯一方法是解析标签元素并将它们放置在输入之后。示例如下。
label.divcheck {
color: blue;
text-decoration: underline;
}
input.divcheck {
display: none;
}
input.divcheck~div {
display: none;
}
input.divcheck:checked~div {
display: block;
}
input.divcheck:checked~label.divcheck {
color: red;
}
section {
display: flex;
}<section>
<div>
<input type="checkbox" class="divcheck" id="other" />
<label class="divcheck" for="other">Button Other</label>
<div class="navigation">
Foo
</div>
</div>
<div>
<input type="checkbox" class="divcheck" id="navigation" />
<label class="divcheck" for="navigation">Button Nav</label>
<div class="navigation">
Other
</div>
</div>
</section>评论
1赞
dckiller
5/18/2021
问题是我的 DIV 不同步。而且我无法插入任何 sript 或 jquery 代码链接
1赞
BOZ
5/18/2021
对不起，没有其他方法可以使用复选框和CSS来做到这一点。
评论