Microsoft IE7 updates the select box

Microsoft has just announced IE7 will handle the select input as a modern browser should. It will now allow developers to use z-index to avoid overlapping and perhaps more artistic forms. Søren Madsen put together the utopia of form design, something every designer should look at and dream of possibilities.

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.


Form design is frustrating.

Form elements are up to the browser for final presentation unless you get into some tricky CSS and JS solutions and those are not necessarily cross-browser solutions. One particular problem I’ve experienced was with the nicetitles javascript that creates a nice popup box with the text of a title attribute on hover. I tried to use this on an insurance quote form to give the visitor better feedback on what was needed. IE6 would place the inputs on top of the popup window. I then tried moving the popup farther to the side to avoid this and that just looked hokey. So, I gave up on the idea. It would be interesting to test this now with IE7.

I’m also intrigued by the ability to use the title attribute on the select object. Normally, I would place the title on the label. However there may be times when the visual design requires hiding the label. Placing a title on the select would be a great way of letting people know the page may refresh or whatever action the select box leads to.

With rumors floating of an IE7 Beta2 developer release within a few weeks, we should begin looking for pages to test these new attributes on.

–This was originally published on



, , , , , , ,




3 responses to “Microsoft IE7 updates the select box”

  1. Still don't work Avatar
    Still don’t work

    Having major select probs with IE7 – just won’t select.

  2. mike Avatar

    Yes, same here. I believe this is one of the things they promised at first, but for some reason it did not make it to the final release. Not sure why… but it obviously is not working in IE7. (standards mode, or quirks) One thing I can say about Microsoft though, they never fail to piss everyone off.

  3. mike Avatar

    Interesting. It would seem that select:focus { color:#000; border:solid 1px #5789C6; } does work in standards mode. But I can’t style the select element’s border color by default…

Leave a Reply

Your email address will not be published. Required fields are marked *