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?

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/… — C3roe
– C3roe, Commented May 7, 2013 at 22:28
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 — user1316401
– user1316401, Commented May 7, 2013 at 22:38

user1316401 · Accepted Answer · 2013-05-07 23:28:32Z

13

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;
}

answered May 7, 2013 at 23:28

user1316401

4651 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ganesh Vellanki Over a year ago

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

nikitaeverywhere Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:02:20Z

3

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered May 7, 2013 at 22:24

CoderOfHonor

7417 silver badges17 bronze badges

9 Comments

user1316401 Over a year ago

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

CoderOfHonor Over a year ago

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

CoderOfHonor Over a year ago

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

user1316401 Over a year ago

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

CoderOfHonor Over a year ago

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?

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Linked

Related