Change select box style

Question

I want to change select box style by using css and jquery is it possible?

Answer 1

Not cross browser using the default select element.

The filament group have a select menu plugin that will enhance a select tag (basically replace it with other elements for js users giving a better experience)

Answer 2

u can use one of this plugin

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Answer 3

There is the .css() jQuery function, but I would shy away from changing styles in this way. Keeping the CSS in one place is definaley a plus.

You could declare another class in your CSS stylesheet, and use the jQuery class functions - .addClass() .removeClass() .toggleClass() functions to change the style on the element that way.

For example:

$("#MySelect").removeClass("OldClass").addClass("NewClass");

Or, if you ever wanted to toggle between:

$("#MySelect").toggleClass("OldClass").toggleClass("NewClass");

Not tested, but should be ok or nearly ok!