html - 我可以唯一地标识 2 个复选框，以便我可以为每个复选框添加不同的图像吗？

Question

目前，我正在为已选中和未选中的复选框使用图像，html 和 css 位于下方。

<div class="text-field-box text-field-box-mobile radio-button-box small">

                <asp:CheckBox ID="ChkOffer1"  text="  "  runat="server" class="checkbox checkbox-mobile radio"   Visible="true" EnableViewState="true"></asp:CheckBox>
                <% Response.Write(Session("Offer1"))%>
                </div>

和CSS

                input[type=checkbox] {
                        display:none;
                }
                 input[type=checkbox] + label
                {
                    background-image: url("checkbox-default.png");
                    background-repeat: no-repeat;
                    height: 25px;
                    width: 25px;

                    padding: 0 0 0 0px;
                    padding-left:30px;
                }

                input[type=checkbox]:checked + label
                {
                    background-image: url("checkbox-checked.png");
                    background-repeat: no-repeat;
                    height: 25px;
                    width: 25px;

                    padding: 0 0 0 0px;
                    padding-left:30px;
                }

我想做的是找到一种可以唯一标识每个复选框的方法，这样我就可以有两个带有两个不同图像的复选框字段。

这些是我失败的尝试 我尝试添加一个名为 radio 的额外类像这样。 input.radio[type=checkbox]我还尝试将 radio 类添加到标签中，如下所示 input[type=checkbox] + label.radio

然后对 ID 进行了同样的尝试，但每次都失败了。有人能解决我的问题吗？

Answer 1

这是我的意思的一个例子:

(哦，请原谅图片:))

#field1,#field2{
  display:none;
}

#field1 + label {
  padding:40px;
  padding-left:100px;
  background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center;
  background-size: 80px 80px;
}

#field1:checked + label {  
  background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center;
  background-size: 80px 80px;
}

#field2 + label {
  padding:40px;
  padding-left:100px;
  background:url(http://www.adventureswithwords.com/wp-content/uploads/2014/11/unhappy_face_sticker-p217427116611791537qjcl_400-390x390.jpg) no-repeat left center;
  background-size: 80px 80px;
}

#field2:checked + label {  
  background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXWLioYfp2eZyyJ2g2VQM2YJd_PwFxrB-DDbZx1WwM8wXo20STCcDung) no-repeat left center;
  background-size: 80px 80px;
}

<input type="checkbox" id="field1"/>
<label for="field1">Label</label>

<input type="checkbox" id="field2"/>
<label for="field2">Label</label>