SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    British Columbia, Canada
    0 Post(s)
    0 Thread(s)

    Input Select Skinning

    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.

    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Victoria, Australia
    28 Post(s)
    2 Thread(s)

    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, may help

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    51 Post(s)
    2 Thread(s)
    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:


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts