$(jquery)
them's the breaks

jquery.combobox.example.style

version 0.1

full styling 

the combobox() function takes an optional options parameter and can be set like this

html (click to view/hide)
<head> <title>jquery.combox example</title> <script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript" src="Scripts/jquery.dimensions.js"></script> <script type="text/javascript" src="Scripts/jquery.combobox.js"></script> </head> <body> <select id="officeItemList"> <option value="1">eraser</option> <option value="3">pencil</option> <option value="4">ruler</option> <option value="5">ink</option> <optgroup label="paper types"> <option value="7">A4 paper</option> <option value="8">A3 paper</option> <option value="9">letter-sized paper</option> </optgroup> <optgroup label="chair types"> <option value="10">executive</option> <option value="11">janitor</option> <option value="12">developer</option> </optgroup> </select> </body>
script: $('#officeItemList').combobox( { comboboxContainerClass: "comboboxContainer", comboboxValueContainerClass: "comboboxValueContainer", comboboxValueContentClass: "comboboxValueContent", comboboxDropDownClass: "comboboxDropDownContainer", comboboxDropDownButtonClass: "comboboxDropDownButton", comboboxDropDownItemClass: "comboboxItem", comboboxDropDownItemHoverClass: "comboboxItemHover", comboboxDropDownGroupItemHeaderClass: "comboboxGroupItemHeader", comboboxDropDownGroupItemContainerClass: "comboboxGroupItemContainer", animationType: "fade", width: "150px" });
css (click to view/hide)
body { font-family: Verdana; font-size: small; } .comboboxContainer { border-left: solid 2px #777; border-top: solid 2px #777; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; } .comboboxValueContainer { background: url(/images/comboboxDisplayValue.gif) repeat-x left top; } .comboboxValueContent { padding-left: 3px; text-transform: uppercase; } .comboboxDropDownContainer { border-right: solid 1px #000; border-bottom: solid 1px #000; border-left: solid 1px #aaa; border-top: solid 1px #aaa; background: #fff; overflow: hidden; padding-left: 3px; cursor: default; } .comboboxDropDownButton { width: 16px; height: 18px; background-image: url(/images/default-combobox.gif); } .comboboxGroupItemHeader { display: block; background: #000; color: #fff; } .comboboxGroupItemContainer { padding-left: 10px; } .comboboxItem { background: #fff; color: #000; text-transform: lowercase; font-weight: normal; font-style: normal; } .comboboxItemHover { background-color: #999; color: #fff; text-transform: uppercase; padding-left: 4px; }

The css classes attempt to render the combox to look like the standard combox found in Windows. The major difference is in the dropdown button which is an image , whereas the basic jquery.combobox uses border styling and a special character '▼' to render the button

live example

note: styles will differ with the default as this site imposes its own styles