Multiple Checkboxes in different colors several id

I would like to know how to color the checkboxes, I have to create several of different colors without using php, how do we deal with the chexboxes of different id? the content: '✔' doesn't display.. Thanks for your help

input[type='checkbox'] {
  color:orange;
  outline: 1px solid orange;
  width: 14px !important;
  height: 14px !important;
  margin: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  content: '';
  box-shadow: none;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;

}

input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
     content: '✔';

     color: orange;
}

<input type="checkbox" id="orange" value="" checked="checked">
<input type="checkbox" id="purple" value="">
<input type="checkbox" id="pink"  value="">

com/h533A.jpg