How to make an element transparent to clicks but still visible?

Question

I'm interested in putting an inset box shadow on something like an iframe. While the strategy of overlaying a div over the iframe gives the expected visual display, the div subsequently blocks clicks on the iframe itself.

Sample: http://jsfiddle.net/YqXPg/

So is there a way to pull off the inset shadow as a "framing" effect?

Answer 1

Yes, there's pointer-events: none.

See: http://jsfiddle.net/YqXPg/3/

A version that makes the overlay more obvious: http://jsfiddle.net/YqXPg/4/

Note that this property doesn't work with IE, but if I remember correctly, IE will allow you to click through the transparent parts of the overlay div anyway.