If you have to make your own dropdown list boxes…

The dropdown list box, or select box, is a massively useful UI tool. It presents a series of predefined options in a format that doesn’t have to eat up all our screen estate. Unfortunately though, we just don’t have the ability to style this that we would like. Or, sometimes none at all. Since this is an OS control, the OS takes control – and apart from the visual implications this is no bad thing. If you absolutely have to have it match the design for the rest of your site though, you have no choice but to implement it yourself. You can achieve this either via JavaScript or Flash. Flash is probably overkill if the rest of your site doesn’t use it, so if you use JavaScript I would heavily advocate the use of progressive enhancement to start with something that works (the select tag) and build something nicer on DOM ready.

If you’re recreating something the OS does though, please try to do it as well as the OS does!

Here’s a useful list of behaviours for a dropdown list box which might seem obvious, but I have seen overlooked so many times.

  • Priority 1
    • Display the current selection in the unexpanded box
    • Display a downwards arrow to the right of the box to indicate it has a dropdown
    • When clicking the box, or the arrow, expand to offer other selections, and when clicking one of those, contract the box and display the exact text for that selection in the box
  • Priority 2
    • Allow keyboard navigation – up and down should move amongst the items, highlighting as appropriate and return should select them as if the user had clicked them
    • Allow keyboard shortcuts – pressing a character should jump the selection to items beginning with that character
  • Priority 3
    • Spacial awareness – where there is no space for a dropdown to appear beneath, or it would appear outside of the viewport, it should appear above instead
    • Dimensional awareness – where there are too many items to display reasonably a scroll bar should display to keep the entire dropdown box in view

I have seen instances where many of these have been ignored, and in the very worst case, where selecting an item showed completely different text in the contracted box. Even an instance where the text displayed actually matched a completely different item in the list!

Hope this helps. AK

3 thoughts on “If you have to make your own dropdown list boxes…

  1. Had to do this a few days ago, although they wanted one of those ugly drop down jump box thingies that we all hate to love. Rather than re-creating what the OS did, just converted an ordered list into a drop down select box in JS. Job done, works without JS, I’m happy, customers happy and most of all, users are happy.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>