How to change the checked color of a checkbox?

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']+span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #7A7A9D;
  box-sizing: border-box;
}

input[type='checkbox']:checked+span::before {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: green;
}

<label>
  <input type="checkbox">
  <span>Eggs</span>
</label>

<label>
  <input type="checkbox">
  <span>Cheese</span>
</label>

<label class="custom-checkbox">
  <input type="checkbox">
  <span >Bacon</span>
</label>