Align checkbox with label and add background color to checked checkboxes

We have the following HTML structure. The wrapper element has a max-width because we don't want it to be longer then that so we have to have a solution with that attribute applied.

We want to be able to hide the default checkbox so that we can style the checkboxes similar to Pure CSS custom checkboxes, but have our own styles we want to use the HTML structure is different.

Questions

How can we style the checkboxes for both unchecked and checked such that they align and checked ones are shown with background-color: green?

Current output:

Desired output:

Here is what we have but have not luck. The checkbox is not even showing.

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>