4

Possible Duplicate:
CSS content generation before ‘input’ elements

I am trying to do custom checkboxes only using css. This works fine on webkit based browsers (chrome, safari), but doesn't on the others.

input[type=checkbox]:before {
  content:'';
  display:inline-block;
  width:24px;
  height:24px;
  margin-top:-8px;
  margin-left:-12px;
  background: url('../img/icons/checkbox_unchecked.png') left center no-repeat;
  border: 1px solid gray;
}
input[type=checkbox]:checked:before {
  background: url('../img/icons/checkbox_checked.png') left center no-repeat;
}​

Why does this only work on webkit based browsers? http://jsfiddle.net/jdB4a/ here's the jsfiddle, I just changed the images to background color, the effect is the same though.

Community
  • 1
  • 1
donk
  • 1,540
  • 4
  • 23
  • 46
  • I think the other browsers don't support background for checkbox, in see here for Mozilla -> https://developer.mozilla.org/en-US/docs/CSS/:checked , i think can help you – A1Gard Nov 28 '12 at 09:08

1 Answers1

1

I am sorry but you cannot achieve this with any browser other than -webkit-. The best way to do it is to have a span with your label in it and position the style on that and put opacity: 0; on the checkbox. Sounds more complicated than it is. Anyway here is a link to a demo that explains how to achieve a css3 multi-browser custom checkbox, hope it helps.

http://acidjs.wemakesites.net/imageless-css-3-custom-checkboxes-and-radio-buttons.html

2ne
  • 5,766
  • 9
  • 30
  • 51