Firefox: Click on CSS pseudo element doesn't trigger click event

Question

Here is my button:

<button class="btn-close">Close alert</button>

... with the following CSS:

.btn-close{
    position: relative;
    height: 30px;
    border: none;
    background-color: #332b2a;
    color: #fff;
    outline: none;
    cursor: pointer;
}

.btn-close:after {
    content: " ";
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    right: -32px;
    top: 0;
    background-color: #332b2a;
}

... and the following (example) jquery:

$(document).ready(function(){
    $(document).on('click', '.btn-close', function(){
        alert("It works!");
    });
});

However, when I try to click on the after element, it doesn't trigger the click event. Does anyone know if there is any solution? I don't really want to use an empty span inside the button.

It works in Chrome, Opera and Safari. My Firefox version is 27.0.1

I made a jsFiddle example if you want to try yourself: http://jsfiddle.net/esRBa/1/

Thanks for your help!

note that if you replace the tag `button` with `div`, it works. But still can't figure it out what `style` allow this — Luccas, Feb 18 '14 at 16:15

score 1 · Accepted Answer · answered Feb 18 '14 at 16:02

1

I think the easiest solution would be to extend the padding to cover the pseudo-element.

.btn-close{
    padding: 0 32px 0 0;
}

.btn-close:after {
    right: 0;
}

answered Feb 18 '14 at 16:02

pstenstrm

6,339
5
41
62

1

This could be a good alternative, I updated the jsfiddle with this solution and it seems to work. http://jsfiddle.net/esRBa/2/ – lefoy Feb 18 '14 at 16:10

Firefox: Click on CSS pseudo element doesn't trigger click event

1 Answers1