Css form checkbox styling with checked and after tags

Question

I am trying to create a form without using JavaScript or jQuery. It includes a number of flags. The idea is to display a specific gif after the checkbox if it is not set. Otherwise, nothing is displayed after it. This is the code I have:

input[type=checkbox]::after { content: url(images/unchecked_after.gif); position:relative; left:15px; z-index:100; } input[type=checkbox]:checked::after { content:""; } 

It works in Chrome, but does not seem to work in Firefox or IE. What's wrong?

Answer 1

The cross browser solution that worked for me was to add an empty label (with the "checkbox_label" class) after entering the checkbox, and then apply the IT style, not the checkbox.

 input[type=checkbox] + label:after { content: url(images/unchecked_after.gif); position:relative; left:0px; top:1px; z-index:100; } input[type=checkbox]:checked + label:after { content:""; } .checkbox_label { height:0px; width:0px; display:inline-block; float:left; position:relative; left:20px; z-index:100; } 

Answer 2

Apparently the use of the ::before and ::after pseudo-elements is not supported by the specification. I answered your question here . Hope this helps!