1

I've placed an image as the background for a checkbox. Everything works fine in chrome but when I use Firefox 32.0.3 firefox does not recognize the background image. Is there something I'm missing that's causing firefox to not add in the background image?

CSS

input[type=checkbox]:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg');
  background-size: 12px;
  top: 2px;
  position: absolute;
  opacity:0.4;
}

HTML

<input type="checkbox" id="chk1" />

Fiddle here.

thank_you
  • 11,001
  • 19
  • 101
  • 185
  • 1
    possible duplicate of [CSS content generation before 'input' elements](http://stackoverflow.com/questions/4574912/css-content-generation-before-input-elements) – Alexander O'Mara Oct 14 '14 at 22:47
  • I don't believe that solves the issue for me because the input type I use is a checkbox and the images will change based on if the checkbox is clicked or not. Unless I'm missing something from this question? – thank_you Oct 15 '14 at 01:00

1 Answers1

0

I solved this by going through a different approach. I created a span tag and with AngularJS (already in my app) I used a ng-class to display the background image to the span tag based on if the checkbox was marked or not.

thank_you
  • 11,001
  • 19
  • 101
  • 185