CODEWITHSUNDEEP
htmlcssbrowser
bababow
bababow

Reputation: 55

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

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!

Upvotes: 1

Views: 2124

Answers (2)

CodingWithSpike
CodingWithSpike

Reputation: 43718

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

Upvotes: 1

jaunt
jaunt

Reputation: 5079

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>

Upvotes: 1

Related Questions