Input Select Skinning

[revlimiter]

http://www.barnesandnoble.com/c/harl...e=30&startat=1

Just curious, but does anybody know how this skinning can be done for the "Sort by" and "View" input select menus? They are accessible with keyboard shortcuts, and seem to work in IE7 and up.

Thanks

[markbrown4]

Hi,

You can View source on that sort of thing to find out, or use an inspector like Firebug.
They are using yui3, have a look through the docs for it, http://developer.yahoo.com/yui/examp...nu-select.html may help

[Stomme poes]

It's pretty brilliant. They're using a YUI library thingie.

What they did:
First, they have a div who exists for Javascript reasons. That div has what looks like the first option text and the arrow image as div children.

After it, they have a normal select element. Unfortunate that they chose a span instead of a label for the label text, bah. That'll prolly hit JAWS users and they may not hear that span. But anyway.

If you have Javascript off, you see that they positioned the div over the select. What I haven't figured out is how the select is still clickable if it's sitting under the div. But anyway if you click it, you'll see a native browser select dropdown appear: it was set to opacity: 0 before so you didn't see it. So, because there's a regular real select underneath, it should work like normal. One exception is you don't see the default-selected text from the select without Javascript.

If you have Javascript on, though, you'll see the text, selected first item, etc from the div in the input. I think JS lets the div click through to the select not sure.

BTW here are some relevant slides about usability and Javascripted/styled form controls: http://www.slideshare.net/Wolfr/desi...ser-interfaces