I'm toying with some code to reproduce a SELECT dropdown using jQuery and some CSS3. The default SELECT element is notoriously difficult to style, but also amazingly difficult to program in a manner that works properly across browsers. I've seen many different projects along the lines of what I've done here, but I finally found one that I liked :-p The original code is from the blog Janko At Warp Speed. I will continue to clean up this code, but for now it is provided without warranty or promise of any kind, so YMMV. For the record, have not even tested in IE yet. Click below for the demo page.
I finally got around to adding OPTGROUP support for a project I'm doing, and I added a few examples showing how the code can be used for site navigation (UL-LI-A dropdown navigation, instead of using a SELECT with an "onchange" handler). My next set of goals is to add keypress support, figure out the best way to make sure the dropdowns always show the same value as the SELECT (even after a page refresh), and maybe add a few more display styles.
I'm still doing work on this project (amazingly). I finally organized the CSS, moving it and the Javascript out of the HTML and into their own files. I also added a download archive and slapped a license at the top of each file (I've been using this code frequently and the license links back to this site). I plan on adding SELECT MULTIPLE and keystroke functionality for a project. I'm hoping ARIA support is not far behind.
Add new comment