10 Free Open Source CSS and JavaScript Select Box Snippets

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.

I’ve curated a collection of my top 10 picks for handmade select box styles. These are not released as plugins but instead rely on templates for JavaScript and CSS customization. But they’re all just as easy to setup and even to re-style for your own purposes.

1. Custom Select Menu

Kicking off the collection is Wallace Erick’s custom select menu styles.

It uses both CSS for restyling and JavaScript for configuring the UX of the menus. They behave slightly differently than standard HTML selects, and I think they’re a little nicer to use.

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.

This relies on more subtle colors with a plain black & white color scheme. But it also uses JavaScript to animate the select menu in and out of view.

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 <select> element.

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

I’m a big fan of pure CSS over JavaScript because it simplifies the entire design process. This isn’t easy but there are so many solutions out there.

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

Here’s one of the more stylized examples of what you can do with select menus. This snippet created by Andy Fitzsimon relies on JavaScript for the dropdown effect and uses custom CSS for gradients and arrow icons.

What’s nice is this menu also supports the no-JS feature so it’ll work even if JavaScript is disabled. It’s called graceful degradation and it’s a web developer’s best friend for accessibility.

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.

They both rely on CSS gradients for the backgrounds and blend the dropdown menus into the lower color of the gradient. This does not use any JavaScript plugin so you can accomplish this with just a bit of CSS and some creative effort.

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.

The post 10 Free Open Source CSS and JavaScript Select Box Snippets appeared first on Speckyboy Design Magazine.