Striking a Balance Between Native and Custom Select Elements
Here’s the plan! We’re going to build a styled select element. Not just the outside, but the inside too. Total styling control. Plus we’re going to make it accessible. We’re not going to try to replicate everything that the browser does by default with a native element. We’re going to literally use a element when any assistive tech is used. But when a mouse is being used, we’ll show the styled version and make it function as a select element. That’s what I mean by “hybrid” selects: they are both a native and a styled alternate select in one design pattern. Custom selects (left) are often used in place of native selects (right) for aesthetics and design consistency. Select, dropdown, navigation, menu… the name matters While doing the research for this article, I thought about many names that get tossed around when talking about selects, the most common of which are “dropdown” and “menu.” There are two types of naming mistakes we could make: giving the same name to different things, or giving different names to the same thing. A select can suffer from both mistakes. Before we move ahead, let me try to add clarity around using “dropdown” as a term. Here’s how I define the meaning of dropdown: Dropdown: An interactive component that consists of a button that shows and hides a list of items, typically on mouse hover, click or tap. The list is not visible by default until the interaction starts. The list usually displays a block of content (i.e. options) on top of other content. A lot of interfaces can look like a dropdown. But simply calling an element a “dropdown” is like using “fish” to describe an animal. What type of fish it is? A clownfish is not the same as a shark. The same goes for dropdowns. Like there are different types of fish in the sea, there are different types of components that we might be talking about when we toss the word “dropdown” around: Menu: A list of commands or actions that the user can perform within the page content. Navigation: A list of links used for navigating through a website. Select: A form control () that displays a list of options for the user to select within a form. Deciding what type of dropdown we’re talking about can be a foggy task. Here are some examples from around the web that match how I would classify those three different types. This is based on my research and sometimes, when I can’t find a proper answer, intuition based on my experience. Dropdown-land: Five scenarios where different dropdowns are used across the internet. Read the table below for a detailed description. Diagram Label Scenario Dropdown Type 1 The dropdown expects a selected option to be submitted within a form context (e.g. Select Age) Select 2 The dropdown does not need an active option (e.g. A list of actions: copy, paste and cut) Menu 3 The selected option influences the content. (e.g. sorting list) Menu or Select (more about it later) 4 The dropdown contains links to other pages. (e.g. A “meganav” with websites links) Disclosure Navigation 5 The dropdown has content that is not a list. (e.g. a date picker) Something else that should not be called dropdown Not everyone perceives and interacts with the internet in the same way. » Read More
Like to keep reading?
This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.