Могу ли я однозначно идентифицировать 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

И попробовал то же самое с идентификаторами, и я не смог каждый раз. Кто-нибудь имеет решение моей проблемы?

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>