Getting clicks on css :pseudo-elements

Question

I'm trying to make a custom checkbox, so I made something like that : http://jsfiddle.net/wQdUn/2/

The problem is that, on WebKit based browsers, the checkbox is toggled only when clicking on the content of the <span>, not on the box itself, while in Firefox I get the behavior I expect.

So I have two questions:

Which one is the right behavior (i.e. the one conform to specifications)?
How do I get the result I want in both browsers (and others...)?

Thanks.

BoltClock · Accepted Answer · 2011-10-03 10:15:16Z

5

Not sure about the first question, but if you make the span an inline block too, it'll work as you expect in WebKit browsers. See http://jsfiddle.net/wQdUn/5

answered Oct 3, 2011 at 10:15

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

3 Comments

thirtydot Over a year ago

Yup.

BoltClock Over a year ago

@thirtydot: The original fiddle here didn't work in Chrome or Safari. I get the feeling WebKit is trolling us sometimes.

thirtydot Over a year ago

The original fiddle works in Safari 5.0.3/Windows 7, but doesn't work in Safari 5.1/Server 2008. I guess I need to update Safari on my actual computer so it can break properly..

merlin · Accepted Answer · 2013-05-20 09:37:14Z

0

For those who come to this topic form google:

Safari 6.0.4(8536.29.13) still got this problem, you need to set inline-block on pseudo-element to make click work.

Chrome switched to Blink as it's rendering engine, so this problem didn't happen on chrome any more(26.0.1410.65).

answered May 20, 2013 at 9:37

merlin

341 gold badge15 silver badges23 bronze badges

Collectives™ on Stack Overflow

Getting clicks on css :pseudo-elements

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related