css form checkbox styling with checked and after tags [duplicate]

Question

I am trying to design a form without using JavaScript or JQuery. It includes a series of checkboxes. The idea is to display a certain gif after the checkbox if it is unchecked. Otherwise, display nothing 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 doesn't seem to be working in Firefox or IE. What is wrong?

Mizuki

input is an element with an empty content model – and since ::after pseudo elements are rendered as child node of the element their are applied to, there’s a conflict. Some browsers allow to do it anyway – some don’t. Use the adjacent sibling combinator instead to format an element you put after the input element. w3.org/TR/2011/REC-css3-selectors-20110929/… – Eggcup

Thanks, that explains it. But I am still unable to get it to work. For example, if I put a "p" tag after the checkbox, the following CSS selector doesn't work: input[type=checkbox]:checked + p:after – Mizuki

Answer 1

The cross-browser solution that worked for me was to include an empty label (with class "checkbox_label") after the checkbox input and then style IT rather than 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;
}

Mizuki

hey thanks for answer can you provide some reference or what is + operator called...? in this.. context – Huttan

element1+element2 selector selects the element2 that goes immediately after element1. – Suanne

Answer 2

Apparently, using the ::before and ::after pseudo-elements is not supported by the specification. Your question is answered here. Hope that helps!

Groats

I'm testing in Firefox 20 and IE10, which is why I figured I was doing something wrong...but what? – Mizuki

I'm trying it out on jsfiddle with firefox and can reproduce your error. Let me see if I can find a fix. – Groats

I think I've found the problem. I've edited it into my answer. – Groats

Unfortunately, wrapping the "input" in a "span" tag didn't work either. Darn, just gotta' keep trying different things I guess... – Mizuki

Hmm... Wrapping the input in a span tag worked for me. Are you sure that you are applying the ::after styling to the span tag and not the input tag? – Groats

I couldn't get that to work. But what I did was added an empty "label" tag after the checkbox, and styled it as "height:0px; width:0px; display:inline-block; float:left; position:relative; left:20px; z-index:100;", and then used sibling selectors, like "input[type=checkbox]:checked + label:after". – Mizuki

Here is an example: jsfiddle.net/5dRXg – Groats

That JSFiddle didn't work in Firefox, and was malformed in Chrome. My solution seems to work fine in both. Thanks for the help tho. – Mizuki

Ok, glad to help. BTW, that jsfiddle used text instead of an image because I didn't have an image to associate with it. – Groats