4

In Internet Explorer 10 the behavior of drop-down boxes (<select> element) has changed: when expanding the box, instead of placing the list of options below the field, the list overlays the field, with the list positioned so that the currently-selected element is centered over the input field.

This is a little hard to describe, so here's a jsFiddle that shows it.

Our users are finding this behavior very confusing. Is there anything I can do in CSS to make the box behave like it did in IE9, and like every other major browser? (Perhaps something like the -ms-clear pseudo-element that hides the clear button in IE10 text input fields.)

Here's a sort of time-lapse screenshot:

IE 10 select box behavior screenshot

Community
  • 1
  • 1
Kip
  • 107,154
  • 87
  • 232
  • 265
  • My IE10 is not experiencing that behaviour. – Alex W Sep 27 '13 at 17:24
  • possible duplicate of [Select drop-down list possible to "Drop-Up"](http://stackoverflow.com/questions/18919573/select-drop-down-list-possible-to-drop-up) – Diodeus - James MacFarlane Sep 27 '13 at 17:24
  • Unless MS implemented something similar to `-webkit-appearance` which I bet not, you can always use a hidden ` – RaphaelDDL Sep 27 '13 at 17:28
  • @Diodeus this is not a duplicate of that question. the other question is talking about controlling location of option box in general. i'm asking if there is any IE-specific modification, similar to -ms-clear for text inputs. – Kip Sep 27 '13 at 19:06

1 Answers1

-1

One option is dynamically change size property of the select to the number of options (or a fixed number - if you have too many options). You would do it on mouse-down, and change it back on-change.

Style, Position of select as well as additional events will have to be tweaked - but here is the proof of concept: http://jsfiddle.net/KnAXL/1/

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • not working for me--when i select "the", then the next time I click it, it goes back to the first item in the list without expanding the list. – Kip Sep 27 '13 at 19:07
  • Yup. IE10 looks like IE10 completely rewrote the behavior and this workaround no longer works. Reason being - IE10 displays full list always relative to selected option. Here's an explanation and possible workaround: http://stackoverflow.com/a/18329113/961695 – Yuriy Galanter Sep 27 '13 at 21:44