为单个输入ID定义CSS样式，而不是输入[type = checkbox]

Question

这是我的复选框

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

这是我的风格

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

我需要使用不同的已选中和未选中的图像为每个复选框设置样式。

我想在我的CSS中引用ID而不是input[type=checkbox]。

怎么做？

Answer 1

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

但如果您不想要，则无需指定标记名称（input）。但它可能有用！ （特别是课程）

详细了解docs中的（ID-）选择器。

Answer 2

代表

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

它将是

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

满足您的需求

Answer 3

使用 id选择器： #

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