CSS :after pseudo-element combined with [checked]: different after-elements not working?

Shoot! Found my own error by copying the code to jsfiddle like BoltClock suggested it, though not using it in the end.

Up vote 0 down vote favorite share g+ share fb share tw.

I am trying to kick up my Web forms by styling my own radiobuttons and checkboxes. To do this, I hide the radio/checkbox itself and create a state-indicating element on the label with the :after pseudo-class, like this: . Pn_multi label{ display: inline-block; border: 1px dotted #FFF; opacity: 0.6; text-align: center; } .

Pn_multi label:hover{ border: 1px dotted #444; opacity: 0.8; } . Pn_multi inputtype=radio:checked + label, . Pn_multi inputtype=checkbox:checked + label { background: #CCE6FF; border: 1px dotted #FFF; opacity: 1.0; position: relative; } /* generic icon */ .

Pn_multi inputtype=radio:checked + label:after, . Pn_multi inputtype=checkbox + label:after { display: block; position: absolute; right: 1px; bottom: 1px; overflow: hidden; /* a lot more styling here, took out for space */ } /* specific icon colors*/ . Pn_multi inputtype=checkbox + label:after { content: "\2714 "; background: #FF9393; color: #F22; border: 1px solid #F22; } .

Pn_multi inputtype=radio:checked + label:after, . Pn_multi inputtype=checkbox:checked + label:after { content: "X "; background: #97FF97; color: #063; border: 1px solid #063; } Now, this works perfetly fine for the radios. I click on the label, and the little tickbox appears on the label, and on no other.

But the problem are the checkboxes: While the checked ones still show the green tickbox, the unchecked ones, show none at all, and not the red one as it is supposed to be. It seems like the . Pn_multi inputtype=checkbox + label:after part is not gripping at all, or like the :checked pseudo-class would overwrite its standalone.

Am I missing something major here? Regards css pseudo-class pseudo-element link|improve this question edited Sep 7 '11 at 17:02 asked Sep 6 '11 at 22:43Wortex17113.

That'd help. – BoltClock's a Unicorn? Sep 6 '11 at 22:51 2 Oh, nice to see you solved it!

I suppose you could make that edit an answer instead. – BoltClock's a Unicorn? Sep 6 '11 at 23:09 1 Go ahead and post your solution as an answer!

– Nightfirecat Sep 6 '11 at 23:09 I will as soon as I can => Users with less than 100 reputation can't answer their own question for 8 hours after asking. You may self-answer in 7 hours. Until then please use comments, or edit your question instead.

– Wortex17 Sep 6 '11 at 23:19.

Shoot! Found my own error by copying the code to jsfiddle like BoltClock suggested it, though not using it in the end. The porblem is this part of code .

Pn_multi inputtype=radio:checked + label, . Pn_multi inputtype=checkbox:checked + label { background: #CCE6FF; border: 1px dotted #FFF; opacity: 1.0; position: relative;} To be exact, the position:relative. I needed this just to be able to set absolute positions on the :after elements (to show them -inside- the label) What I oversaw was, that this way, only the checked labels were made relative.

Thus the absolute position of any :after elements created on unchecked elements resulted in positioning them outside the screen. Solution: made every label position:relative from the beginning. Thanks and sorry for inconvenience.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.