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>

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

1 个答案: