Abusing Customizable Selects

Summary

Web browsers ship new features all the time, but what fun is it if we can’t build silly and fun things with them? In this article, let’s go over a few demos that I’ve made by using the new customizable <select> feature, and walk through the main steps and techniques that I’ve used to implement them. I hope they get you as excited as I am about custom selects, and give you just about enough knowledge to get started creating your own. Yours might be more, you know, useful than mine, and probably for good reasons, but I like going a little bit overboard on silly ideas because that gives me a better chance to learn. Before we start, a word about browser support: the demos in this article only run on recent Chromium-based browsers because that’s where customizable selects are implemented right now. However, this feature is designed in a way that doesn’t break non-supporting browsers. After all, a customized <select> element is still a <select> element. So, if the browser you’re using doesn’t support customizable selects, you’ll just see normal selects and options in these demos, and that’s great. It’ll just be a lot less fun. Curved stack of folders Let’s get started with the first demo: a stack of folders to pick from, with a twist: We’ll start with some HTML code first. We don’t need a lot of complicated markup here because each option is just the name of the folder. We can draw the folder icons later with CSS only. <select> <option value="documents"><span>Documents</span></option> <option value="photos"><span>Photos</span></option> <option value="music"><span>Music</span></option> <option value="videos"><span>Videos</span></option> <option value="downloads"><span>Downloads</span></option> <option value="desktop"><span>Desktop</span></option> <option value="projects"><span>Projects</span></option> <option value="backups"><span>Backups</span></option> <option value="trash"><span>Trash</span></option> </select> You’ll notice that we’ve used <span> elements inside the <op...