How do I style jQuery Combobox to look like a normal select dropdown

I am making use of jQuery 1.4.4 and jQuery UI 1.8.7 in a legacy code base.

I have added a few combobox() ui-widgets, these comboboxes live along side normal <select> dropdowns.

I am finding it difficult to 开发者_如何学编程get the two elements to look the same, i.e. the unstyled <select> with it's Internet Explorer / Windows based style and the most basic jQuery UI Themed ui-widget combobox.

The screenshot shows an unstyled <select> on the left and a jQuery ui-widget combobox on the right:

Is it possible to make the two look the same?

Yes, but you'd need to adapt the jQuery UI theme to match the system default combobox. Having said that, it's not a good way to do it, since that default is dependent on the operating system your browser is running on, so if you want consistent dropdowns across your application, use jQuery UI on all of them, since that way you can fully control all aspects of the presentation without worrying about the different platforms the browser is running on.

The simplest way to make them look the same is to take a screen shot of the rendered drop down button and place it next to your jQuery drop down. Then you can easily apply a border to match with CSS.