The HTML as seen in Firebug:

<div class="select-contain">
    <select id="sel" name="sel" class="some-class">
    <!-- <option>s -->
    </select>
    ::after
</div>

With the CSS :

.select-contain:after { background: image.jpg; position: absolute; /** ... */ }

The result is something like this:

The problem is that the image on the :after pseudo selector cannot be clicked to open the <select>.

I tried doing something with jQuery:

jQuery('.select-contain').click(function(e){
    console.log(e); // the event is triggered succesfully
    jQuery(this).find('select').focus(); // .click()
});

But this doesn't work due to the fact that I didn't find a reliable way of opening a <select> programmatically

Is there any way that I can open the <select> with the pseudo element on top of it ?