我们有以下 HTML 结构。 wrapper
元素有一个 max-width
因为我们不希望它比那个长,所以我们必须有一个应用该属性的解决方案。
我们希望能够隐藏默认复选框,以便我们可以将复选框设置为类似于 Pure CSS custom checkboxes 的样式,但有我们自己的样式,我们要使用的 HTML 结构是不同的。
问题
我们如何为未选中和选中的复选框设置样式,使它们对齐,选中的复选框显示为 background-color: green
?
当前输出:
期望的输出:
这就是我们所拥有的,但没有运气。该复选框甚至没有显示。
ul {
list-style: none;
display: block;
}
ul li {
display: block;
}
input[type="checkbox"] {
}
input[type="checkbox"]:checked {
}
.wrapper {
// This needs to remain.
max-width: 160px;
}
<div class="wrapper">
<ul>
<li>
<input type="checkbox">
<label>
<span>Clear All</span>
</label>
</li>
<li>
<input type="checkbox">
<label>
<span>Cloud and Data monitoring</span>
</label>
</li>
</ul>
</div>
最佳答案
还有更多的方法。例如。
input[type='checkbox'] {float: left;}
input[type='checkbox'] + label {display: block; margin-left: 30px;}
实际上,您使用任何自定义复选框,当然在 CSS 中将是自定义元素而不是 input[type='checkbox']
。
关于html - 将复选框与标签对齐并为选中的复选框添加背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56569933/