Pure CSS Checkbox Image Replacement

Pure CSS checkbox image replacement

You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label

Complete Code: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

Pure CSS Checkbox Image replacement multiple pairs

Your approach is the cleanest currently possible. There's no JS, it works with older browsers as well, so what's the problem, exactly? The only thing I would do would be to streamline the whole CSS, as it's currently not really making use of the C in CSS - cascading, that is, and also consolidate the different card images in a sprite. Like so:

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

input[type=checkbox] + label{
    background-image: url('cards.png');
    display: block;
    height: 40px;
    padding: 0;
    width: 64px; }

#Paypal + #PaypalL{ background-position: 0 0; }
#Paypal:checked + #PaypalL{ background-position: 0 -40px; }

#MasterCard + #MasterCardL{ background-position: 0 -80px; }
#MasterCard:checked + #MasterCardL{ background-position: 0 -120px; }

#Visa + #VisaL{ background-position: 0 -160px; }
#Visa:checked + #VisaL{ background-position: 0 -200px; }

In the example above, the sprite has the card images stacked one on top of the other, each 40px high, hence the background-position offset.

Otherwise, your code is solid and it's what I would personally do, over any other checkbox replacement solution out there.

Image replacement for Checkbox

You left the following in your first example:

input[type=checkbox] {
    opacity: 0;
}

That will make it "not render."

Now, having removed that trifling little style, you'll likely ask

Okay, the control shows up now... so, why doesn't the background image show up?

That's because you don't have any real control over how radio-buttons, check-boxes, combo-boxes, file-upload controls, etc are styled. The label solution works because you can happily style a label to the full extent of css. The controls I've mentioned? Not so much...

Change checkbox check image to custom image

Try:

<input type="checkbox" class="input_class_checkbox">

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle:
http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){    $(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))});

.class_checkbox {    width: 20px;      height: 20px;    background-color: red;}.class_checkbox.checked {    background-color: green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="checkbox" class="input_class_checkbox">

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

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>

ul{  list-style:none;}input[type="checkbox"] {  opacity: 0;  position: absolute;  width: 100%;  height: 100%;  z-index: -1;}
input[type="checkbox"] + label {  background: url(https://i.stack.imgur.com/eiFBl.png) no-repeat 0 center;  padding-left:60px;  line-height:50px;  display: inline-block;  cursor:pointer;}input[type="checkbox"]:checked + label {  background: url(https://i.stack.imgur.com/mCst2.png) no-repeat 0 center; }.check-wrap{  position:relative;  display: inline-block;}

<ul id="myUL" class="ulChecklist">  <form action="/action_page.php">    <li>      <div class="check-wrap">        <input type="checkbox" name="instruction" id="Step1">        <label for="Step1">Step 1</label>      </div>    </li>    <li>      <div class="check-wrap">        <input type="checkbox" name="instruction" id="Step2">        <label for="Step2">Step 2</label>      </div>    </li>    <li>      <div class="check-wrap">        <input type="checkbox" name="instruction" id="Step3">        <label for="Step3">Step 3</label>      </div>    </li>  </form></ul>