Take the 2-minute tour ×

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 {
  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.

share|improve this question

marked as duplicate by McGarnagle, Kyle, donkapone, Donal Fellows, j0k Nov 28 '12 at 11:48


I think the other browsers don't support background for checkbox, in see here for Mozilla -> developer.mozilla.org/en-US/docs/CSS/:checked , i think can help you –  Mahdi Parsa Nov 28 '12 at 9:08

1 Answer 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.


share|improve this answer
