Styling dropdown forms

I want to style a dropdown form so that it appears completely differently to an OS driven form. This is notoriously a problem to make the form behave well cross browser and开发者_运维百科 I'm yet to find a good solution.

I've tried this script: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/ which works fine for dropdown forms which have a small number of selectable items however it starts to break down cross-browser when a scroll bar is required to allow the user to navigate to the data item they desire.

My dropdown has 250 such values so I'm left with a broken front-end. The mouse wheel can be used to navigate fine, but the form instantly disappears if the user selects the up ↑ or down ↓ OS buttons to navigate up and down the list.

Has anyone be able to crack custom styling dropdowns? Is there a workaround? Maybe a different script is in order?

You're looking for a technical solution, which doesn't belong here. That belongs on stackoverflow. I will, however, address the usability issue you present here. A dropdown with 250 items is virtually unmanageable. You should really consider somehow handling this differently. A taller select box is one option, but maybe some sort of search or autocomplete is better, where the user can type in their choice. As long as you validate what they enter when the form is submitted, that should work fine.