For the SELECT few...

The information published in this post is now out-of-date and one or more links are invalid.

—IEBlog Editor, 21 August 2012

Hello, I am Kun, the first developer of IE Beijing team in Microsoft. Our team has been working on the Intrinsic Controls of IE in the past year. Among these controls, the SELECT element has been greatly improved. IE6’s SELECT element didn’t support certain properties, like z-index, title, and zoom. In IE7, we have re-worked the SELECT element. This new version has features and fixes that will make IE7 a better user experience. This is work that has long been requested by web developers and it is certainly something that should have been addressed in past releases. In IE7 the work on the SELECT element along with our work on CSS is part of our focus to supply web developers with a consistent platform for great web solutions.

We are continuing to refine the Windowless SELECT elements and we are very proud of it. This should make web and application developers happier since this will allow them to have the Select control perform Z-order and Zoom the way it was intended to without elaborate workarounds and hacks. If you were one of those people relying on the Windowed Select element in your code, you should be aware of this change so as to make sure your sites and applications continue to work with IE7.

In IE7, we have taken a feature (SELECT element) that every internet user has run into in some form or another and made it work better for everyone. We did this without introducing new user behaviors or specific programmatic alterations that would force thousands of web developers to have to change their sites. Essentially, if it worked in IE6, it should work the same or even better in IE7.

SELECT element in IE7 - An Overview

In IE6, the HTML <SELECT> element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.

In IE7 however, we re-implemented the <SELECT> element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.

SELECT element in IE7 - Windowless and Z-order

A big problem of IE6’s SELECT element was that it could not perform z-index.

Here is an illustration.

When a user moved the mouse over to the “Mouse Over Here” in figure 1, this triggered the select element. Z-Index=1 should be behind and hidden by the select element (which appears as a yellow box) while Z-index = 3 should appear visible above the select element.

Instead with the legacy Windowed element you will find these two SELECT elements always placed on top of the floating DIV, even though the DIV has a higher z-index value.

Figure 1
Figure 1 IE6 Select Behavior (you can still see Z-Index=1 even though it should be behind Z-Index=2 layer)

Floating DIV tags (or other block elements) are a common technique used to write DHTML menus. But with this issue, web developers had to be careful not to put any SELECT element below these menus or else they would get obstructed. Although a work around with complex scripts was possible, it was inconvenient and kludgy.

This issue comes from the fact that the SELECT element in IE6 is a window based control, which always stays above the content of its parent IE window.

The Windowless Select Element

In IE7, the SELECT element has been changed into a windowless element. This means that Listbox and the inline part of Combobox are laid out and rendered directly by MSHTML. In other words, they are drawn directly within content flow. This new windowless SELECT element will follow the z-index priority in the markup. The following screen shot shows how the sample markup above will look in IE7.

Figure 2
Fig 2 IE7 Select Behavior (Z=Index = 1 is now hidden beneath Z-Index=2 the way it is supposed to be)

The main thing that you should take away from this posting is that the Windowless SELECT element is coming to replace the Windowed SELECT element in IE7. If your web or application developers adhered to normal HTML procedures in calling the SELECT element, then it should be fine. What worked in IE6 should work better in IE7. If you were using workarounds calling on the Windowed SELECT API, you may need to re-inspect your code to make sure that it doesn’t break on IE7.

We’d love to hear any comments, feedback or experiences that you’ve had with the SELECT Element or even Z-Order so that we can continue to improve this great feature.

- Kun Cong