HTML Combobox

CSS, Web January 27th, 2008

Can’t understand why none of modern browsers (IE, FF, etc) support the “Combobox” element, so I guess lots of web developers are reinvent the wheels again and again.

I googled and find a bunch of combobox implementations:

[1] http://particletree.com/features/upgrade-your-select-element-to-a-combo-box/ Best of the visual effect, act exactly like a real combobox. Work good on both IE and FF. This is a ASP.NET server side control, it’s not free. But worth to learn how it looks so good

[2] http://www.digital-web.com/articles/building_accessible_widgets_for_the_web/ Good, however it use its own drop down button (an additional input), I don’t like…

[3] http://www.tgreer.com/comboArticle.html Good, but contain some code for old IE hack so it’s buggy on IE7, visual effect is not perfect.

[4] http://particletree.com/features/upgrade-your-select-element-to-a-combo-box/ Good, but have some small issue on the styles, buggy in IE 7 and FF. :(

[5] http://www.xaprb.com/blog/2005/09/29/javascript-combo-box/ I don’t like it, it use Listbox and listen on key events to fake the edit, it works not like a real combobox.

[6] http://www.codeproject.com/KB/custom-controls/combobox.aspx ASP.net server control, like [2] it paint the dropdown button itself, not looks nice enough.

Since none of them are ready to use directly, I created my own…sigh reinvented the wheel again! It’s worth to look at [1] to find out how they handle the visual good.

I think the javascript part is simple, above [2][3][4] explained good enough, the css is the key, here is what I finally get:

CSS

.comboBox {
    position: relative;
}
.combobox div
{
    padding: 0;
    margin: 0;
}
.comboList
{
    margin-top: 1px; /* FF don’t need this! */
    position: absolute;
    width: 155px;
    height: 19px;
    z-index: 1;
    clip: rect(auto, auto, auto, 136px);
}
.comboEdit
{
    margin:0;
    width: 137px;
    height: 21px;
}

HTML

<div class=”combobox”>
<select id=”selCombo” tabindex=”-1″ class=”comboList”>
    <option selected=”selected” value=”"></option>
    <option value=”1″>Item 1</option>

    <option value=”2″>Item 2</option>
    <option value=”3″>Item 3</option>
    <option value=”4″>Item 4</option>

</select>
<input class=”comboEdit” type=”text” id=”txtCombo” />
</div>

IE and FF have 1 px offset in displaying the select element, so we have to add “margin-top: 1px” in IE. We can handle this automatically in Javascript.

The key part of above is: clip: rect(auto, auto, auto, 136px). I didn’t use this css property before, more detail about it is here: http://www.w3schools.com/css/pr_pos_clip.asp