iOS engineer who likes clean, simple designs and sans-serif.

Loading

Using Lists Instead of Form Selects

Over the holidays, I was really busy working on a little mini-app for our New Years Resolution campaign, a “mad-libs” style new years resolution. We chose to make it not free-form, because we didn’t want people to get too… creative using our brand. There is one free-form text field and some cheeky fun pre-populated choices.

form-vs-list

For GA, the look was extremely important and it was frustrating to work with the browser default select tags. They are really ugly and really difficult to control with CSS. They also look really different on every browser. Eeek.

I did some research and found this article on how to use JavaScript to swap select tags based on lists.

The concept is that you hide the selects and use javascript to link the lists to change the hidden selects. The user doesn’t even know and has a similar experience no matter what device/browser.

I had to strip out a lot of the code since I didn’t need it, but once I had lists that changed the select values, it was pretty easy to style it in the General Assembly way.

Before:
letter-using-selects
After:
letter-using-lists

Check it out here: GA New Years “Letter to Yourself”.

Leave a Comment