Changing the color of checkbox if checked

I am trying to change the background color and border of a checkbox but it is not working.

HTML:

<label for="checkbox1" class="checkbox">
  <input id="checkbox1" type="checkbox" role="checkbox" /><span class="custom">Checkbox</span>
</label>

CSS:

.checkbox input:checked {
    border-color: red;
    background-color:red;
}

JSFiddle Demo

UPDATE:

I can't change the markup