{"id":2290,"date":"2019-06-10T03:56:24","date_gmt":"2019-06-10T03:56:24","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2290"},"modified":"2019-06-02T04:34:17","modified_gmt":"2019-06-02T04:34:17","slug":"10-free-css-javascript-select-box-snippets","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/10-free-css-javascript-select-box-snippets\/","title":{"rendered":"10 Free CSS &#038; JavaScript Select Box Snippets"},"content":{"rendered":"\n<p>The default HTML select boxes have served us well for decades. But in the modern era, it\u2019s fair to say they\u2019re a little\u2026 stale.<\/p>\n\n\n\n<p>Designers can do better and thanks to advancements in CSS it\u2019s easy to customize select boxes. Not to mention all the\u00a0open source code\u00a0freely available online.<\/p>\n\n\n\n<p>I\u2019ve 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\u2019re all just as easy to setup and even to re-style for your own purposes.<\/p>\n\n\n\n<h3>1. Custom Select Menu<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Custom Select Menu\" id=\"cp_embed_ctsCz\" src=\"https:\/\/codepen.io\/wallaceerick\/embed\/preview\/ctsCz?height=300&amp;slug-hash=ctsCz&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Kicking off the collection is Wallace Erick\u2019s&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/wallaceerick\/pen\/ctsCz\" rel=\"noreferrer noopener\">custom select menu styles<\/a>.<\/p>\n\n\n\n<p>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\u2019re a little nicer to use.<\/p>\n\n\n\n<p>You can choose the size and color style of the menu or work with Wallace\u2019s defaults. Best of all he includes a custom upload field design which, if you\u2019ve ever tried to restyle, you\u2019ll know it\u2019s tough.<\/p>\n\n\n\n<p>An excellent place to start if you just want a clean yet fresh-looking select menus that work.<\/p>\n\n\n\n<h3>2. Simple Select<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Dropdown Menu\" id=\"cp_embed_JRjwPa\" src=\"https:\/\/codepen.io\/General-Dev\/embed\/preview\/JRjwPa?height=300&amp;slug-hash=JRjwPa&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Here\u2019s another very&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/General-Dev\/pen\/JRjwPa\" rel=\"noreferrer noopener\">simple select box<\/a>&nbsp;that aims to blend more naturally into every layout.<\/p>\n\n\n\n<p>This relies on more subtle colors with a plain black &amp; white color scheme. But it also uses JavaScript to animate the select menu in and out of view.<\/p>\n\n\n\n<p>It works by targeting a hidden input field that behaves&nbsp;<strong>just like<\/strong>&nbsp;the select field. This way you can still pull data from the frontend into your forms, because this solution technically doesn\u2019t use the actual&nbsp;<code>&lt;select&gt;<\/code>&nbsp;element.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3>3. Non-Sucky HTML Dropdowns<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Custom dropdown\" id=\"cp_embed_msrcE\" src=\"https:\/\/codepen.io\/silverdrop\/embed\/preview\/msrcE?height=300&amp;slug-hash=msrcE&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>As the name suggests, this pack of select menus aims to just not to suck. They all have&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/silverdrop\/pen\/msrcE\" rel=\"noreferrer noopener\">varying styles<\/a>&nbsp;and sizes with buttons you can click to change the colors on demand.<\/p>\n\n\n\n<p>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\u2019re gorgeous to use.<\/p>\n\n\n\n<p>If you do worry\u00a0about compatibility\u00a0then consider working with this template.<\/p>\n\n\n\n<p>Most changes are cosmetic so it shouldn\u2019t affect user behavior very much.<\/p>\n\n\n\n<h3>4. Placeholder Select<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Select Box with Placeholder [CSS Only]\" id=\"cp_embed_GZLQBw\" src=\"https:\/\/codepen.io\/jnowland\/embed\/preview\/GZLQBw?height=300&amp;slug-hash=GZLQBw&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The actual design of&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/jnowland\/pen\/GZLQBw\" rel=\"noreferrer noopener\">this placeholder select menu<\/a>&nbsp;is gorgeous, but the design isn\u2019t the only factor here.<\/p>\n\n\n\n<p>Developer James Nowland created this menu with the goal of&nbsp;<strong>removing the default<\/strong>&nbsp;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.<\/p>\n\n\n\n<p>It\u2019s 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 \u201cselect an option\u201d text anywhere in the dropdown menu. Really creative solution!<\/p>\n\n\n\n<h3>5. Flat Design<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Flat selectbox\" id=\"cp_embed_wksIF\" src=\"https:\/\/codepen.io\/PeterGeller\/embed\/preview\/wksIF?height=300&amp;slug-hash=wksIF&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Aesthetics often matter in web design and&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/PeterGeller\/pen\/wksIF\" rel=\"noreferrer noopener\">this flat select menu<\/a>&nbsp;is a great example.<\/p>\n\n\n\n<p>It still works just like a typical select and the dropdown portion hasn\u2019t 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.<\/p>\n\n\n\n<p>You could even take this template and expand it with your own\u00a0flat styles\u00a0applied to the dropdown area. Totally your call!<\/p>\n\n\n\n<p>But as a starting template this is one of the simplest choices for any interface.<\/p>\n\n\n\n<h3>6. Pure CSS<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Accessible checkboxes and radio  buttons\" id=\"cp_embed_jBQQpp\" src=\"https:\/\/codepen.io\/michmy\/embed\/preview\/jBQQpp?height=300&amp;slug-hash=jBQQpp&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I\u2019m a big fan of\u00a0pure CSS\u00a0over JavaScript because it simplifies the entire design process. This isn\u2019t easy but there are so many solutions out there.<\/p>\n\n\n\n<p>One of my favorites is&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/michmy\/pen\/jBQQpp\" rel=\"noreferrer noopener\">this snippet<\/a>&nbsp;featuring not just pure CSS select menus, but radios and checkboxes too.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3>7. Styled Accessible Dropdowns<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"styled drop down with nojs support\" id=\"cp_embed_HjaBk\" src=\"https:\/\/codepen.io\/andyfitz\/embed\/preview\/HjaBk?height=300&amp;slug-hash=HjaBk&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Here\u2019s one of the more stylized examples of what you can do with select menus.&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/andyfitz\/pen\/HjaBk\" rel=\"noreferrer noopener\">This snippet<\/a>&nbsp;created by Andy Fitzsimon relies on JavaScript for the dropdown effect and uses custom CSS for gradients and arrow icons.<\/p>\n\n\n\n<p>What\u2019s nice is this menu also supports the no-JS feature so it\u2019ll work even if JavaScript is disabled. It\u2019s called&nbsp;<a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Graceful_degradation\" rel=\"noreferrer noopener\">graceful degradation<\/a>&nbsp;and it\u2019s a web developer\u2019s best friend for accessibility.<\/p>\n\n\n\n<p>Still these select menus run the old-school web 2.0 gradients which may not fit into a design for 2017 and beyond.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3>8. SVG Icon Menu<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"SVG Icon Menu\" id=\"cp_embed_jgupn\" src=\"https:\/\/codepen.io\/CarrieWiley\/embed\/preview\/jgupn?height=300&amp;slug-hash=jgupn&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>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&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/CarrieWiley\/pen\/jgupn\" rel=\"noreferrer noopener\">any other icon<\/a>&nbsp;you please.<\/p>\n\n\n\n<p>This custom menu has its own plus icon design running with a pure SVG file. When you click to expand the menu, it\u2019ll animate into an X icon for closing\/hiding.<\/p>\n\n\n\n<p>I\u2019ve never seen anything quite like this before and it shows how far we\u2019ve come pushing the limits of web browsers.<\/p>\n\n\n\n<p>Unfortunately this&nbsp;<strong>does not<\/strong>&nbsp;run on the native HTML select element. It\u2019s a collection of list items inside a&nbsp;<code>div<\/code>&nbsp;so it would need to target a hidden input field whenever a value is selected.<\/p>\n\n\n\n<p>Thankfully that process is real easy so if you want this design on your site it shouldn\u2019t take much work to get it going.<\/p>\n\n\n\n<h3>9. Select Box Experiment<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Select Box Experiment\" id=\"cp_embed_bNPBxB\" src=\"https:\/\/codepen.io\/maneeshc\/embed\/preview\/bNPBxB?height=300&amp;slug-hash=bNPBxB&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Here\u2019s an&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/maneeshc\/pen\/bNPBxB\" rel=\"noreferrer noopener\">experimental design<\/a>&nbsp;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.<\/p>\n\n\n\n<p>When you first tap\/click to open the menu it\u2019ll slide down with full\u00a0animation 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.<\/p>\n\n\n\n<p>A really good example of clean design with simple animation. But if you don\u2019t like the missing click-to-hide feature this one may be a deal breaker.<\/p>\n\n\n\n<h3>10. Dark &amp; Light Selects<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Dark and Light Dropdown Lists\" id=\"cp_embed_Jasci\" src=\"https:\/\/codepen.io\/Thibaut\/embed\/preview\/Jasci?height=300&amp;slug-hash=Jasci&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you also love pure CSS and want sleek selects then&nbsp;<a target=\"_blank\" href=\"https:\/\/codepen.io\/Thibaut\/pen\/Jasci\" rel=\"noreferrer noopener\">check out this solution<\/a>&nbsp;and try using one of them as a starting template.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><em><strong>Note<\/strong>: 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\u2019ll find, and it leaves a lot of room for customization too.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The default HTML select boxes have served us well for decades. But in the modern era, it\u2019s fair to say they\u2019re a little\u2026 stale. Designers can do better and thanks to advancements in CSS it\u2019s easy to customize select boxes. Not to mention all the\u00a0open source code\u00a0freely available online. I\u2019ve curated a collection of my [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2291,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,8],"tags":[25,94,116],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/06\/CustomSelectBox.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-AW","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2290"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2290"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"predecessor-version":[{"id":2701,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2290\/revisions\/2701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/2291"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}