HTML Combobox
Sunday, January 27th, 2008Can’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
Popularity: 20% [?]
Speed up your web pages with YSlow 
I hope I was wrong…someone tell me.
About