custom checkbox overlayed with standard checkbox in Firefox / IE; Chrome works fine

Question

I'm currently facing a problem with some checkboxes. Here you have a little extract from one of them (without the php inside):

<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1"/>

They get the images (one for checked and another one for unchecked) via CSS:

#func1 {
display: block;
width: 128px;
height: 32px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;

}
#func1:checked {
background: url(icons/monitoring.png);
}
#func1:not(:checked) {
background: url(icons/monitoring-bw.png);
}

So when I run this in Chrome everything works fine. I see the image for the unchecked box and when I click it I can see the image for the checked one.

But when using Firefox or IE, I see the image of the standard checkbox overlaying my custom images. I hope you can help me and it's reproducable. Regards!

Answer 1

To get reliable results for styling select boxes, it's actually best to hide the input and use their label. For example:

 body{display: flex;} .mycheckbox { display:none; } .mycheckbox + 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; } .mycheckbox: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; } 

 <input type="checkbox" id="field1" class="mycheckbox" /> <label for="field1" class="mycheckbox-label">Label</label> 

Answer 2

You have:

-webkit-appearance: none;

specified, but are missing the other browser prefixes. You can try:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

However, IE does not support the appearance CSS property, even in the latest version. http://caniuse.com/#search=appearance

---

For an alternate approach, check out my blog post: Fancy CSS Checkboxes with FontAwesome