Textbox with drop down list behaviour using CSS/JavaScript

Question

I'm trying to create a uniform style for a small web form.

The problem is that the dropdown list seems to be pretty impossible to style as needed - the browser scroll options etc coming from the OS seemingly.

The solution I can see is to manipulate a combobox implementation so that I can use a text box, with the selections managed through JavaScript/CSS but I don't know where to start. It feels as though someone must have done something like this before but I've looked around Google and can only find poor examples of CSS on the droplist itself, or really heavily engineered ComboBoxes which I need to strip out to the nth degree to get working.

What I'm trying to create looks like this:

Has anyone done anything like this before, or could they point me at a decent resource for doing what I need. It is an ASP.NET implementation, but I'll happily utilise JQuery etc if needed?

Thanks for your help.

Answer 1

Try the jQuery plugin Editable Select.

Answer 2

Listboxes are rendered by the OS and not by the browser. They will look different on a Mac vs Windows XP vs Vista etc.

As RegDwight suggests, you need to roll-you-own, using CSS/HTML/JavaScript and forget about using for anything more advanced.