将复选框与标签对齐，并将背景色添加到选中的复选框

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/

Answer 2

有许多教程和方法可以使用CSS创建自定义复选框。

您提供的代码不包含Utkanos提到的任何复选框样式。

尝试遵循示例How To Create a Custom Checkbox by w3schools