Changing the color of checkbox if checked [duplicate]

Question

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

Answer 1

Use below option

input[type="checkbox"]#checkbox1:checked + span {
      border-color: red;
    background-color:red;
}

Answer 2

You will have to wrap the checkbox in a span to do it. Found a Fiddle with Ex.

<span class="bigcheck">
    <label class="bigcheck">Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes"/>
        <span class="bigcheck-target"></span>
    </label>
</span>

Hope it helps :)