Can I uniquely identify 2 check boxes so that I can add a different image to each?

Currently I am using an image for checked and unchecked checkboxes the html and css is below.

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

and 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;
                }

What I would like to do is find a way I can uniquely identify each checkbox so that I can have two checkbox fields with two different images.

These are my failed attempts I tried adding a extra class called radio like this. input.radio[type=checkbox] I also tried adding the radio class to the label like this input[type=checkbox] + label.radio

And tried the same with the ID's and I failed each time. Does anyone have a solution to my issue?