Custom Select Box DropDown
 

This page illustrates using Javascript events and CSS2 to give the effect of a drop-down select box whose drop-down width is controlled separately from the width of the select box itself. The middle select box has had its drop-down made considerably wider than normal to properly accomodate the long second value. The surrounding select boxes are standard select boxes, present just for reference and also to show that the middle select box is layed out as normal.

If the user's browser has Javascript disabled then the select box behaviour should gracefully degrade to that of a normal select box.

Feel free to use this as you wish. If you find any bugs please let me know by emailing me at Guy @Footring.net, bugs with fixes even more welcome:-)

Tested with IE6, Firefox 1.07, Netscape 7.2 and Opera 7.1

Here are the event handler function definitions:

<script type="text/javascript"> // Disabling the select box stops the dropdown list happening var clickDown=false; function dropdown_mousedown(dropdown, listbox, newFocus) { var focusStr = ''; dropdown.disabled = true; if (!listbox.disabled) { clickDown = true; focusStr = 'document.getElementById("' + dropdown.id + '").focus();' } else { newFocus.focus(); } setTimeout( 'document.getElementById("' + dropdown.id + '").disabled=false;' + focusStr ,10); } function dropdown_mouseup(dropdown, listbox) { if(!clickDown) { listbox.style.top=dropdown.offsetHeight + dropdown.offsetTop; listbox.style.left=dropdown.offsetLeft; listbox.disabled=false; for(var i = 0; i< dropdown.length;i++) { listbox.options[i] = new Option(dropdown.options[i].text, dropdown.options[i].value, dropdown.options[i].defaultSelected, dropdown.options[i].selected); } listbox.style.display='block'; listbox.focus(); } else { clickDown = false; } } function select_click(dropdown, listbox) { dropdown.selectedIndex=listbox.selectedIndex; dropdown.focus(); listbox.style.display='none'; listbox.length = 0; listbox.disabled=true; } function select_blur(dropdown, listbox) { listbox.style.display='none'; listbox.disabled=true; if(!dropdown.disabled) { dropdown.focus(); } } function select_keypress(dropdown, listbox, event) { var charCode; if (event.keyCode) charCode = event.keyCode; else if (event.which) charCode = event.which; if ( (charCode == 13) || (charCode == 32)) { select_click(dropdown, listbox); } } </script>

Then all that remains is to set up the HTML elements. In this example realfoo is the id of the controlling select box, foo is the id of the drop-down box. Note the extra (virtually invisible) text input (id=dummy) to get around some focus issues...

<span> <input type='text' id='dummy' style='width:1;height:1;border:none' /> <select id="realfoo" style="width:200" onMouseDown="dropdown_mousedown(this,document.getElementById('foo'),document.getElementById('dummy'));" onMouseUp="dropdown_mouseup(this, document.getElementById('foo'));"> options go here </select> <select id="foo" size="20" style="display:none;width:400;position:absolute;" onclick="select_click(document.getElementById('realfoo'), this);" onblur="select_blur(document.getElementById('realfoo'), this)" onkeypress="select_keypress(document.getElementById('realfoo'), this, event);" DISABLED> </select> </span>