How to replace checkbox with an image using a label with no id

Question

I don't believe this question is a duplicate, I have read Pure CSS Checkbox Image replacement and I am taking code from http://www.hongkiat.com/blog/css3-checkbox-radio/

My issue is that I do not want to use IDs for my checkboxes as this is a template and many may be included on the same page. I've almost gotten everything working but I cannot select the label:before when the checkbox is checked to change it to a different background color.

HTML

<label><input type="checkbox" /></label>

CSS ( the last selector is the one I'm trying to get to work )

input[type="checkbox"] {
    display:none;
}

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
}

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
}

input[type="checkbox"]:checked + label:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}

You really should be using ID's...the fact that this is a "template" shouldn't be an obstacle. — Paulie_D, Nov 25 '14 at 16:51
The template can be loaded many times on the same page so you would end up with duplicate ids. This is very likely as the template is for a widget with configurable options — LiamRyan, Nov 25 '14 at 16:55
Then you'd need Javascript for this functionality I suspect. — Paulie_D, Nov 25 '14 at 16:59
id or name, a checkbox is pretty meaningless without either of these. How are you using it from an html perspective? Are these on/off style bool selections? or do they just toggle other things? I think your template isn't going to take you where you want to be, with or without this extra style. — BReal14, Nov 25 '14 at 17:03

score 1 · Accepted Answer · answered Nov 25 '14 at 17:05

You can add an extra span inside the label but after the input and use the pseudo-element on that

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  top: 0;
  right: -30px;
  width: 16px;
}
label span:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #aaa;
}
input[type="checkbox"]:checked + span:before {
  content: "";
  background: #219161;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 16px;
  width: 16px;
  display: inline-block;
  padding: 0 0 0 0;
}

<label>
  <input type="checkbox" /><span></span>
</label>

LiamRyan · Answer 2 · 2014-11-25T17:10:10.970

JS solution for reference, CSS answer came in after I posted and leaving this for future reference

HTML ( loaded into a div which has a templateID of thisTemplateID )

<label><input type="checkbox" class="checkboxtype1" /></label>

JS

$('#' + thisTemplateID + " .checkboxtype1").bind('change', function() {
            if ( $( this ).prop("checked") ) {
                $(this).parent('label').addClass('ticked');
            } else {
                $(this).parent('label').removeClass('ticked');
            }
});

CSS

label {
    display: inline-block;
    cursor:pointer;
    position:relative;
    font-size:13px;
    top:0;
    right:-30px;
    width:16px;
    }

label:before {
    content: "";
    display:inline-block;
    width:16px;
    height:16px;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    background-color:#aaa;
    }

label.ticked:before {
    content:"";
    background:#219161;
    margin-right:10px;
    position:absolute;
    left:0;
    bottom:1px;
    height:16px;
    width:16px;
    display:inline-block;
    padding:0 0 0 0;
}

Accepted, thanks. Leaving this JS solution for reference – LiamRyan Nov 25 '14 at 17:07 — LiamRyan, Nov 25 '14 at 17:07

How to replace checkbox with an image using a label with no id

2 Answers2