pennypacker.net: CSS Tricks: Select Menu

CSS Tricks: Select Menu

I picked up a fun CSS trick after working on the fcXHTML Reference Widget in regards to styling select menus.

There's really not a whole lot to it, so I'll keep it short and sweet. Safari and Firefox both support opacity in CSS, so developers can create transparent and semi-transparent elements that render properly in those browsers. If you make a select menu transparent, it'll be perfectly visible and opaque while it is expanded, but in its closed state, it's as if it's not there. A whole lot of good that does on its own, right? Right.

But, an author may create an image of a styled select menu to be displayed in place of the select menu. I'll be using this one:

and using opacity with it to create the illusion of a styled select menu. Here's how:

Wrap the select menu in a div like so:


<div id="fancyselectmenu">

<select> ... </select>

</div>

Now style the elements appropriately. Use the select graphic as a background image of the wrapper div, style the width of the select menu to be at least as wide as the graphic, and then set the select menu's opacity to 0.


#fancyselectmenu {

width: 129px;

height: 22px;

background: #fff url("selectmenu.png") 0 0 no-repeat;

}

select {

width: 129px;

opacity: 0;

}


Voila! Now you've got a fancy styled select menu. Here is an example of the concept; the css is in the head of the XHTML Strict document, and no javascript is required.

Caveats

There is more than one hitch with this technique. Internet Explorer has no support for opacity. We can hope that IE7 will remedy this, but in the meanwhile, simply ensuring that the select menu is at least as wide as the graphic will cause IE to put its select menu on top of the graphic, and no one will ever see the graphic behind it. IE users will just see the default select menu.

Opera also doesn't support opacity, and the default select menus in Opera for the Mac aren't tall enough to cover my sample image, so some of this particular sample image will be visible. A smaller graphic could be used and it would solve that problem. It's essentially the same problem as IE, and I've left the example image intentionally too large so that you can see how the page will render if this mistake is made.

That's all there is to it. A silly CSS trick that modern browsers can enjoy while not interfering with legacy browsers.

under:

Web Development

Posted on

2005-09-27