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

Answer 1

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> 

Answer 2

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 .