Pure CSS checkbox image replacement

Question

I ve got a checkbox list in a table    one of a number of CB s on the row     lt tr gt  lt td gt  lt input type  checkbox  class  custom image  value  1  id  CB1    gt  lt label for  CB1  gt  amp nbsp  lt  label gt  lt  td gt  lt  tr gt    lt tr gt  lt td gt  lt input type  checkbox  class  custom image  value  2  id  CB2    gt  lt label for  CB2  gt  amp nbsp  lt  label gt  lt  td gt  lt  tr gt    lt tr gt  lt td gt  lt input type  checkbox  class  custom image  value  3  id  CB3    gt  lt label for  CB3  gt  amp nbsp  lt  label gt  lt  td gt  lt  tr gt    lt tr gt  lt td gt  lt input type  checkbox  class  custom image  value  4  id  CB4    gt  lt label for  CB4  gt  amp nbsp  lt  label gt  lt  td gt  lt  tr gt    I d like to replace the checkbox image with a pair of custom on off images and I was wondering if anyone had some better understanding of how to do this with CSS   I ve found this  CSS ninja  tutorial  but I ll have to admit to finding it a bit complex for me   http   www thecssninja com css custom-inputs-using-css  As far as I can tell  you re allowed to use a pseudo class    td not  foo   gt  input type checkbox    label         background  url   images off png   0 0px no-repeat       height  16px       padding  0 0 0 0px       My expectation was that by adding the above CSS the checkbox would at least default to displaying the image in the OFF state and then I d add the following to get the ON   td not  foo   gt  input type checkbox  checked   label        background  url   images on png   0 0px no-repeat       Unfortunately  it seems I m missing a critical step somewhere   I ve tried to use the custom CSS3 selector syntax to match my current setup - but must be missing something  The images are size 16x16 if that matters   http   www w3 org TR css3-selectors  checked  EDIT  I d been missing something in the tutorial where he applies the image change to the label and not the input itself   I m still not getting the expected swapped image for checkbox result on page  but think I m closer

User · Accepted Answer

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

User · Answer

If you are still looking for further more customization    Check out the following library  https   lokesh-coder github io pretty-checkbox   Thanks

User · Answer

Using javascript seems to be unnecessary if you choose CSS3   By using  before selector  you can do this in two lines of CSS   no script involved    Another advantage of this approach is that it does not rely on  lt label gt  tag and works even it is missing   Note  in browsers without CSS3 support  checkboxes will look normal   backward compatible    input type checkbox  before   content     display inline-block  width 12px  height 12px  background red    input type checkbox  checked before   background green       You can see a demo here  http   jsfiddle net hqZt6 1   and this one with images   http   jsfiddle net hqZt6 6

[css] Pure CSS checkbox image replacement

Examples related to css

Examples related to checkbox

Examples related to css-selectors