click on label doesn't open select

Question

I always thought, that a click on a label will more or less "trigger" the click on the according form-element. However this doesn't seem to work when it comes to select. The "mousedown-on-selectfield"-animation works but the select is not opening.

I tried this:

<label for="my_id">Click me</label>
<select id="my_id">
  <option>1</option>
  <option>2</option>
</select>

and that:

<label for="my_id">Click me
  <select id="my_id">
    <option>1</option>
    <option>2</option>
  </select>
</label>

Any Idea what I am doing wrong?

PS: Imo there should be no need for any Javascript here since this is an html-feature

Answer 1

As per W3C, clicking on a label might do nothing or send onFocus event to the related field. In this case, normally it will trigger onFocus on the select element.

https://www.w3.org/TR/html5/forms.html#the-label-element