Define CSS style for single input ID, instead of input[type=checkbox]

Question

This is my check box

<input type="checkbox" name="MyName[]" value="A1" id="A1"/>
<label for="Filter"></label>
<input type="checkbox" name="MyName[]" value="A2" id="A2"/>
<label for="Filter"></label>

This is my style

input[type=checkbox] {..}
input[type=checkbox] + label {background:'image-1'}
input[type=checkbox]:checked + label {background:'image-2'}

I need to style EACH checkbox with a different checked and unchecked image.

I was thinking to refer to ID instead of input[type=checkbox] in my CSS.

How to do that?

Answer 1

input#A1
input#A2
input#A1:checked
input#A2:checked

But you don't need to specify the tag name (input) if you don't want. But it can be useful though! (Especially with classes)

Read more about (ID-)selectors in the docs.

Answer 2

for

<input type="checkbox" name="MyName[]" value="A1" id="A1"/>

it will be

input[name=MyName[]] {..}

to satisfy your need

Answer 3

With the id selector: #

input#A1 {background:url('image-1.jpg');}
input#A1:checked {background:url('image-1-checked.jpg');}
input#A2 {background:url('image-2.jpg');}