Our incredibly talented designer Ryan Clark has a tendency to create these really cool looking select box UIs. They’re awesome, except for the fact that they’re impossible to style. So we started looking at jQuery plugins to allow us to style them exactly how they were designed. We found a couple of different plugins that worked and then settled on one that we liked. The problem came when we browsed the page on our phones. The iPhone has a really nice UI for select boxes, but with the jQuery implementation in place, this functionality didn’t work. While the custom select box worked great in desktop browsers, the experience was definitely lacking for mobile.
We found another plugin that used an interesting technique of styling elements that sat underneath a transparent select box, so that a click or tap would actually be on the select box, thus triggering the native browser functionality—PERFECT! The problem, however, was that the code behind it wasn’t so perfect. Since Ryan loves to create these elements, and we love to use them, we decided to write our own.
So yesterday, I started coding up a new plugin and got the basic functionality working. This morning I added a little polish and then started adding keyboard navigation and auto select for typing out an option. It’s not done yet, and not exactly ready for production, but we wanted to put it out there to share. Feel free to poke around, fork it, modify it, rewrite it...
