dropdownlist styling in Internet explorer [duplica

Question

This question already has an answer here:

• IE10 Select box issue 4 answers

I have some problems with the way IE renders my DropDownList. In Firefox it looks as it should and thats the way I wanted displayed in IE too. Here is a screenshot of the dropdownlist in Firefox:

screenshot in IE:

I want the dropdown to expand vertically up until where the dropdownlist is, I don't want the dropdown to go below the existing dropdown control. Is there some trick how to do that with css? Thanks in advance, Laziale

Answer 1

This is just the way that drop-down menus work in Internet Explorer 10 and up (as well as in Windows Store apps): when the menu opens, the selected item overlays the drop-down control, which other items appearing above and below it. Presumably, Microsoft made this change so that the menu is more touch friendly.

I browsed through the list of CSS properties supported by Internet Explorer, but I didn't notice any that affect the position of the menu. So if this behavior is unacceptable, you will need to eschew the native operating system control in favor of an HTML/CSS-based drop-down menu, such as jQuery Selectmenu or Telerik's RadDropDownList.

Answer 2

Adhering above answers, this may help -

If u select first item in the list and open it again, list will be opened downwards

Now select the option at the bottom, and open the dropdown again. The list will open covering other elements

Answer 3

Refer - IE10 Select box issue

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.

Answer 4

The reason for this is that every browser has a different implementation for select boxes. It's almost impossible to implement a nice crossbrowser supported select box. The only way to do a 'secure' implementation is to hide the select box and replace it with a custom select list implementation.

I would highly recommend to use an already existing component. If you already use jQuery, have a look at Select2.

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

I use it since a couple of months on my page and I can say that it's absolutely great.

Answer 5

This jsfiddle is not final but you will have no choice to have your own custom select list if you have it to appear the same in every broswer.

The example in my jsfiddle is the easiest way for me to implement a select list. By using <input type="radio" />radio button, it is easy to customize it via css and to get the selected value.

Just take a look at it.

Answer 6

Dropdown lists are essentially controlled by the browser. Limited styling does work sometimes, but it's completely untrustworthy cross-browser. The reason for this is that they're often actually using the operating system's rendering for the dropdown.

If you want full control over your dropdown, you have to draw it yourself from scratch using <ul>'s and <li>'s, make the dropdown trigger an <a> tag and use javascript to toggle visibility of the <ul> and transfer chosen values.

JavaScript plugins exist which take an existing dropdown & do something comparable to this to it. I don't know one which matches your request exactly, but something like a JQueryUI autocomplete in combobox mode (http://jqueryui.com/autocomplete) may give you a good starting point to style from.