1

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 understand 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.

ajbeaven
  • 9,265
  • 13
  • 76
  • 121

1 Answers1

4

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • That javascript solution won't open the drop down, all it does is fire the click event on the select element. – ajbeaven Aug 17 '11 at 02:21
  • Ah.. you're right, sorry. As you stated in your question, it is indeed impossible to open a `select` via JavaScript. I'm not sure how you can work around this, short of creating your own dropdown (which you already said is not viable for you). I've just tried a few ideas out, and I really can't come up with anything. – thirtydot Aug 17 '11 at 02:28
  • Maybe for only IE and Opera, hide the `label` on `:hover`. I know it's not the same, but it's the only thing that comes to mind. – thirtydot Aug 17 '11 at 02:29