Watermark label positioned over top of select stops click propagation

I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.

Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understa开发者_C百科nd you can't open a dropdown via javascript but can you do something like hide the label when the click fires?

Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.

CSS can handle that: add pointer-events: none to the label.

That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.