jQuery: How to style Selects and <asp:dropdowns

There is a strange thing about select tags. Browsers do the styling and you have almost no power over it! You can change some colors and fonts but you can never make them beautiful (or in my case I can’t give the designer a chance to make them beautiful).
I searched for a while and found some approaches with pointer-events and divs but they aren’t a complete solution because they either aren’t cross-browser or you can’t style the options of the select.

Finally I found a jsFiddle with a jquery plugin that wraps the select and writes an unordered list as options. Worked nice but it had two major problems:

  • Filtering (you couldn’t type a letter and navigate through the options or hit enter to select an option)
  • Change event (for some reason when .NET did the job of writing a dropdown with auto postback, thus outputting a select with __doPostBack in onchange event, the event never fired)

I corrected the errors, and published my version of the plugin in github:
https://github.com/georgekosmidis/jquery-selectYou can also find the initial plugin here: http://jsfiddle.net/tovic/ZTHkQ/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s