Better List Boxes through Styling

A while ago, I added the new(ish) NYU Poly website to my idea clip file for a rather elegant solution to the academic program page problem. They used an old-school list box, but made it great. 

If you're familiar with higher ed, you know that they all have a page that lists degree programs. A small-to-medium liberal arts school may be able to alphabetically list their 50 majors on one page. Larger schools present more problems: they may need to list programs ranging from associates to baccalaureate, graduate degrees, grad certificates, and so on, then may need to sort these all by location or another attribute.

Lately, I've been fond of using a tab treatment, but that does not help the user more specifically refine. NYU Poly uses two list boxes: one for degree and another for location that work in combination (or alone) to seamlessly present tailored results. 

NYU Poly's list box (a slow connection afforded me this view)

NYU Poly's coders made an otherwise drab (and somewhat unfamiliar) list box easier to use by styling it so that the user just had to click a label. They kept the results on page, with a beautiful transition so that users could clearly see that their data set had been modified. 

The list box properly rendered.

Nice replacement for list boxes or dropdowns, huh?