Home arrow Style Sheets arrow Page 2 - Taming the Select

Taming the Select

So, having a good time with SELECT? Probably not. That's why today, Chris Heilmann will be teaching you the ups and downs of making things look the way your client wants things to look. After all, you do want to get paid, don't you?

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 50
November 15, 2004
  1. · Taming the Select
  2. · DOM to the rescue
  3. · But wait, there is more!
  4. · The Script

print this article

Taming the Select - DOM to the rescue
(Page 2 of 4 )

What we can style nicely are JavaScript drop-downs. We can have a link that shows and hides a list of links in an accessible manner (off-left). The only problem is that we make ourselves dependent on JavaScript, something we must avoid at all costs.

By using DOM JavaScript we can replace the original SELECT with a style-able and accessible drop-down, one that only appears if the browser can handle it.

This script does that. It grabs every SELECT in the document with the class turnintodropdown and replaces it with a styleable CSS dropdown. In essence, it replaces the SELECT with a new DIV. This DIV contains a hidden field has the same name and id as the original SELECT. Furthermore the script creates a list of links that get populated from the OPTION data and a link that shows and hides this list when being clicked on. Clicking one of the links in the list will populate the hidden field with the current value, set it as the text of the "hide and show" link and hide the list.

To see it in action, check the example page.

The style of the drop-down is defined in some classes that get applied via the script as needed:

  • dropcontainer - Defines the parent element of the newly created drop-down parent (a DIV). This needs to be set to "position:relative" to position the drop-down.

  • trigger - Defines the look of the link when then drop-down is hidden.

  • activetrigger - Defines the look of the link when then drop-down is shown.

  • dropdownhidden - Defines the look of the generated drop-down (a UL) when it is hidden.

  • dropdownvisible - Defines the look of the generated drop-down when it is hidden.

Check the CSS embedded in the example page for one possible solution.

You can change the class names in the variable section at the top of the script.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials