dance stuff and web stuff

a weblog by
Duje Dorotic

prettyDropdown.js – a jQuery select box visual enhancment

So I’ve been away from blog again :) But still made something new… One of my latest stuff is this, prettyDropdown.js, a jQuery plugin for visually enhancing your dropdowns (<select>  tags).
The main problem with dropdown styling is that you cannot add specific style to the dropdown itself (only the parent select tag, not the option tags).  I’ve come across this problem before, and found some solution on the interwebs, and after a time I decided to make my own.

What the plugin does is the following:

  • hides the original dropdown
  • creates a copy of the dropdown (with divs, lists and spans)
  • shows this copy in the same place as the original dropdown

The click events stay linked with the original dropdown, so when you change the option on the prettyDropdown it gets changed in the original as well, so that, for example, form posting goes thru normally. Also, if you use it for mobile devices, it will not trigger the default dropdown, rather it will display the same dropdown as on the desktop version :)
As far as the visual appearence (colors n stuff) is concerned, it’s all customizable.

There are 3 ‘variations’ of the dropdown:

  1. dropdown without a scrollbar  – meant for dropdown with a fewer number of options
  2. dropdown with the native scrollbar – fixed height dropdown (height specifided in CSS) with the native scrollbar of each OS/browser
  3. dropdown with flexcroll.js© – fixed height dropdown (height specifided in CSS) with the flexcroll.js© scrollbar by Emrah Baskaya

prettyDropdown.js is FREE for any kind of use, except the  flexcroll.js© part. flexcroll.js© is NOT my work and is FREE only for NON-COMMERCIAL usage. You can read the terms and purchase the license here.


The current version of the plugin is 0.91, and it has been tested on: Chrome 1+, Firefox 3.5+, Opera 9.5+, Safari 3.1+ and IE7+ (IE7 and IE8 are done with images for the dropdown arrow),  so check it download it use it :)

Leave a Reply

Your email address will not be published. Required fields are marked *


six + = 15

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

2011 © swoopDESIGN