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

On clicking on label,it will just focus the selectfield ,it will not open it — Ankit Chaudhary, Sep 18 '15 at 13:30
So why a checkbox is getting checked, when clicking on its label instead of only focusing it? — Fuzzyma, Sep 18 '15 at 13:33

score 5 · Accepted Answer · answered Jan 23 '17 at 02:38

5

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

answered Jan 23 '17 at 02:38

jperelli

6,988
5
50
85

click on label doesn't open select

1 Answers1

Linked