The default HTML select boxes have served us well for decades. But in the modern era, it’s fair to say they’re a little… stale.
Designers can do better and thanks to advancements in CSS it’s easy to customize select boxes. Not to mention all the open source code freely available online.
1. Custom Select Menu
Kicking off the collection is Wallace Erick’s custom select menu styles.
You can choose the size and color style of the menu or work with Wallace’s defaults. Best of all he includes a custom upload field design which, if you’ve ever tried to restyle, you’ll know it’s tough.
An excellent place to start if you just want a clean yet fresh-looking select menus that work.
2. Simple Select
Here’s another very simple select box that aims to blend more naturally into every layout.
It works by targeting a hidden input field that behaves just like the select field. This way you can still pull data from the frontend into your forms, because this solution technically doesn’t use the actual
If compatibility is a concern then skip this one. But I have to admit the design is gorgeous and would be perfect for desktop traffic.
3. Non-Sucky HTML Dropdowns
As the name suggests, this pack of select menus aims to just not to suck. They all have varying styles and sizes with buttons you can click to change the colors on demand.
Obviously you can remove that feature in your own layout and stick to one scheme that works for your site. But overall these select menus work just like a normal one, and they’re gorgeous to use.
If you do worry about compatibility then consider working with this template.
Most changes are cosmetic so it shouldn’t affect user behavior very much.
4. Placeholder Select
The actual design of this placeholder select menu is gorgeous, but the design isn’t the only factor here.
Developer James Nowland created this menu with the goal of removing the default from the selection choice. This means it behaves more like a placeholder in text fields where you see it when the field is blank, but once you set a value it disappears.
It’s fully compliant and works with the actual HTML select element. An option field is hidden by default whenever the user picks a choice. This way you never see the “select an option” text anywhere in the dropdown menu. Really creative solution!
5. Flat Design
Aesthetics often matter in web design and this flat select menu is a great example.
It still works just like a typical select and the dropdown portion hasn’t been changed at all. But just the restyling of the select itself does liven up the page. It feels much classier than the ugly browser default.
You could even take this template and expand it with your own flat styles applied to the dropdown area. Totally your call!
But as a starting template this is one of the simplest choices for any interface.
6. Pure CSS
One of my favorites is this snippet featuring not just pure CSS select menus, but radios and checkboxes too.
All of them look phenomenal and should blend into any type of layout. You have full control to make edits in the CSS and best of all these should work in all major browsers too.
7. Styled Accessible Dropdowns
Still these select menus run the old-school web 2.0 gradients which may not fit into a design for 2017 and beyond.
But this shows you can take select menus anywhere you want with a little creativity. And these can work surprisingly well if you hack your way through the CSS to customize them a little.
8. SVG Icon Menu
Default select menus have the arrow icon to the side and not much else. With a bit of SVG magic you can transform this into any other icon you please.
This custom menu has its own plus icon design running with a pure SVG file. When you click to expand the menu, it’ll animate into an X icon for closing/hiding.
I’ve never seen anything quite like this before and it shows how far we’ve come pushing the limits of web browsers.
Unfortunately this does not run on the native HTML select element. It’s a collection of list items inside a
div so it would need to target a hidden input field whenever a value is selected.
Thankfully that process is real easy so if you want this design on your site it shouldn’t take much work to get it going.
9. Select Box Experiment
Here’s an experimental design that really caught my eye. The comparison demo screen shows how different this is to regular select menus and how it alters the user experience.
When you first tap/click to open the menu it’ll slide down with full animation effects. But it will not hide unless you click the menu again, unlike typical select menus that hide when you click anywhere else on the page.
A really good example of clean design with simple animation. But if you don’t like the missing click-to-hide feature this one may be a deal breaker.
10. Dark & Light Selects
If you also love pure CSS and want sleek selects then check out this solution and try using one of them as a starting template.
Note the CSS itself is pretty complicated, so it helps if you know your way around the language. But for a starting point, this is one of the best choices you’ll find, and it leaves a lot of room for customization too.
- 9 Custom Open Source File Upload Field Snippets
- 12 Free Modal Window Libraries & Plugins For Your Site
- 10 Incredible Examples of CSS, JS & SVG Logo Design
- 10 Magnificent Code Examples of Morphing SVGs