Can I make an element's padding (or border) unclickable?

Question

I have a few radio buttons that I'm styling with PNG background images, using :hover to swap out the background image for one with a surrounding halo. The halo areas from adjacent radio buttons overlap, so they should not be part of the clickable area. Yet they are still part of the same image.

Ideally, I'd like to show the halo behind the padding area, so I need the content area of each radio button to be clickable, but not the padding. I can't find any CSS attribute that controls this. The pointer-events attribute is almost, but not quite what I need, and most of its values apply only to SVG anyway.

All that Google searches turn up are pointers on how to use the padding to make the clickable area bigger, not smaller. I can use CSS3-only attributes if necessary, but would prefer not to add any extra markup to my HTML.

Any bright ideas?

Answer 1

You should change it to margin. Than should be not clickable.

Answer 2

I'm afraid this is not possible without adding extra markup. If you were using divs you could add a pseudo-element that contains the background image, but unfortunately it is not possible on input elements (:before and :after).

You need to add a wrapper div that handles the background image: http://jsfiddle.net/sQGV9/

Also, beware of the usability issues this may cause, a hover effect usually implies that the element is clickable, so in the jsfiddle I added a cursor: pointer so it is clear the precise area where you are supposed to click.

If you attach an image with the halo effect you want to achieve it may be possible to achieve the effect in css3, removing the need for extra markup.

Answer 3

if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'