html - 将复选框与标签对齐并为选中的复选框添加背景颜色

Question

我们有以下 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>

Answer 1

还有更多的方法。例如。

input[type='checkbox'] {float: left;}
input[type='checkbox'] + label {display: block; margin-left: 30px;}

实际上，您使用任何自定义复选框，当然在 CSS 中将是自定义元素而不是 input[type='checkbox']。

https://jsfiddle.net/1haub3kx/1/