Label tag has select dropdown, does not work in IE11

Question

html code to test on IE :

<input name="radiogroup" id="x" type="radio">
<label for="x">
  test
    <select>
      <option value="5">5</option>
      <option selected="selected" value="10">10</option>
      <option value="15">15</option>
    </select>
  </label>

This is a sample code

What do you mean by "does not work". Do you get an error? Please explain. — phil652, Apr 18 '17 at 18:09
How does this relate to JavaScript? Please specify this and show your JavaScript code or remove the “javascript” tag. Ditto for CSS. — Jukka K. Korpela, Apr 18 '17 at 18:17
@phil652 I just tested it and the thing that doesn't work is that when you try to expand the dropdown, the dropdown closes automatically. But I agree that the OP should have mentioned that in the question. — Donald Duck, Apr 18 '17 at 19:17

score 0 · Answer 1 · answered Apr 18 '17 at 18:03

0

Try moving the select tag outside the label tag.

<input name="radiogroup" id="x" type="radio">
<label for="x">
  test
</label>
<select>
  <option value="5">5</option>
  <option selected="selected" value="10">10</option>
  <option value="15">15</option>
</select>

answered Apr 18 '17 at 18:03

Rodrigo5244

5,145
2
25
36

Incase of voice over (accessibility), it won't read the selected dropdown value for the radio button. I would just read **test** instead of **test 10**. With the original code voice over works fine for all browsers. – Nilay Shah Apr 18 '17 at 18:37

score 0 · Answer 2 · edited May 23 '17 at 10:31

You can set the onclick event of the <select> to return false:

<input name="radiogroup" id="x" type="radio">
<label for="x">
    test
    <select onclick="return false">
        <option value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option>
    </select>
</label>

This works because making the onclick event return false keeps the default browser behavior from taking place, and for Internet Explorer, the default browser behavior is the behavior that you don't want, that is closing the dropdown right after the user opened it.

Note that if you want the default browser behavior to take place for other browsers than Internet Explorer, you can use Javascript to test if the browser is Internet Explorer and only return false if the browser is Internet Explorer (the method for doing this comes from this answer):

function browserIsIE(){
    if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
        return true;
    }
    else{
        return false;
    }
}

<input name="radiogroup" id="x" type="radio">
<label for="x">
    test
    <select onclick="if(browserIsIE()){return false}">
        <option value="5">5</option>
        <option selected="selected" value="10">10</option>
        <option value="15">15</option>
    </select>
</label>

The Javascript code could be made a lot more elegant, but I didn't do so for the sake of clarity.

Note that I've tested both codes in Chrome, Firefox and Edge and both codes had exactly the same behavior in these three browsers, so you can use whichever of the above codes you want.

You can read more about using return false with events here.

Label tag has select dropdown, does not work in IE11

2 Answers2