Changing the color of checkbox if checked

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

Checkboxes don't have a `background-color` attribute. I'd suggest reading up on custom checkboxes, as there's unfortunately a bit more involved in changing their appearance. — Tyler Roper, Aug 31 '16 at 15:48
Interesting read: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css — ne1410s, Aug 31 '16 at 15:49
Create your own checkbox [like this](https://jsfiddle.net/xv7vjspf/8/). — skobaljic, Aug 31 '16 at 16:01

score 3 · Answer 1 · answered Aug 31 '16 at 15:52

3

Use below option

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

answered Aug 31 '16 at 15:52

Naga Sai A

9,949
1
15
34

that changes the color of the text – user4756836 Aug 31 '16 at 15:54

score 2 · Answer 2 · answered Aug 31 '16 at 15:51

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 :)

Changing the color of checkbox if checked

2 Answers2