A while ago I got in touch with my good friend Robby Harvey who often finds himself in the middle of cool web based projects. If anything, I feel like Robby tinkers in some of the coolest things, and when he starts playing with something, he takes it pretty far. A while ago, we tried our hand at starting an online T-shirt store called DownPixel, I took it upon myself to help beautify the way the website looked.

One night, in a sleep-deprived stupor, I felt that our product pages weren’t visually popping. This could largely be attributed to the fact that I think standard HTML select menus are pretty ugly, instead I wanted to see if I could use JQuery to make a better menu.

It’s something that almost came to me in a dream, except I was awake. a fever daydream if you will. I always saw people using nifty menus for selecting shirt sizes. Ones that involved boxes that looked like buttons, and the active size was highlighted in some way. It was an exciting design! So much better than the depressingly bland HTML select!

Now, Unfortunately, after some migrations and a switch to a Woocommerce WordPress platform, we lost the actual visual of it. However, I’ve recreated the spirit of it all in a JS fiddle! So all is not lost!

And now, if you wanted to, you could tack a display: none; onto the select so it’s not rendered to the user, and you end up having a nice little set of boxes that can pick dropdown options for you!

Thinkin’ outside the box. RIGHT THERE!