Custom CSS checkboxes

Hi, I have custom checkboxes throughout my checkout page where the check box itself is hidden and a ‘:before’ selector attached to the label replaces it.

Unfortunately this method only works when the checkbox is next to the label, rather than inside it. Any suggestions on how I can get around this, or might the plugin be updated?

.woocommerce-checkout #payment input[type="checkbox"] {
	    display:none;
}
.woocommerce-checkout #payment input[type="checkbox"] ~ label:before {
  border: 0;
  content: "\00a0";
  display: block;
  float: left;
  font: 16px/1em sans-serif;
  height: 16px;
  margin: -2px 7px 0 0;
  padding:0;
  vertical-align: top;
  width: 16px;
  background:rgb(228,230,231);
}

.woocommerce-checkout #payment input[type="checkbox"]:checked ~ label:before {
  background: url('xxx') -76px 4px / 87px auto no-repeat rgb(228,230,231);
  color: #666 ;
  content: " ";
  text-align: center;
}