I was testing my application in IE10 and found a strange behavior for select box. The option selected is highlighted and options above/below are displayed above/below the selected one. The drop down box is hidden.
This happens only in IE10. In all other browsers, options are displayed below the select box.
Try with below sample code in IE10 and IE9:
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Is there any way to make the options below the select box like usual or there is any hack for IE10?
Thanks.
This is the default behavior for this control in Internet Explorer 10. Depending on the number of items in the list and the size of the screen, other browsers will display the menu differently as well - though I think IE10 is the only browser that will balance the number of items above and below the select element when the dropdown is opened.
Use
<select size="1">
to force a single line visible. This is not an IE10 specific hack but works across the board.
One of the advantages of the new behavior in IE10 is that it makes touch interaction much easier. Also, it is consistent with how the rest of Windows behaves. There are currently no ways to change this behavior. I have passed the feedback to the IE team.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With