How To Restyle Select Menus like Autosuggest Fields
Most users commonly relate autosuggest features with text-based input fields. Select menus are quite different because they only support a limited number of options. This is preferred in many instances where you only want the user to select one specified option(ex: gender or location). But let me spin you a new idea - consider how a select field would change if it were instead designed like a text-based input field. How could we accomplish such a task?
Live Demo - Download Source Code
Enter the sleek and sexy flexselect plugin to solve this intricate problem. Using a bit of jQuery it's simple to convert a select dropdown menu into an autosuggest input field. This process would be most useful to designers who want a new aesthetic feeling to their form layout. The plugin does support mobile browsers but older legacy browsers would best be served with a fallback. Take a peek at my live demo to see the final effect.
How to Restyle Select Menus - Getting Started
Flexselect requires a small number of libraries for JS and CSS. First head over to the plugin page and download a copy of the code from Github. You'll also need a recent copy of the jQuery library.
Create your own separate stylesheet named styles.css to contain all the primary document styles. There's a file named flexselect.css within the .zip archive that should also be included - this will handle the default flexselect styles. Then include a copy of the jQuery library along with liquidmetal.js and flexselect plugin. The liquidmetal library is used solely for sorting and ranking during autosuggest.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Restyled Select Menus - Template Monster Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" type="text/css" media="all" href="css/flexselect.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/liquidmetal.js"></script> <script type="text/javascript" src="js/jquery.flexselect.js"></script> </head> |
The page body is straightforward relying on a single select menu. For my demo I've created two duplicate select fields where one has the .flexselect class. The select menu itself lists all the capital cities from each US state. We could fill the input field with a substantial number of options from any topic and the plugin should work just fine.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <div class="select-container" style="text-align:center;"> <select class="flexselect" name="select1"> <option value="1">Montgomery, Alabama</option> <option value="2">Juneau, Alaska</option> <option value="3">Phoenix, Arizona</option> <option value="4">Little Rock, Arkansas</option> <option value="5">Sacramento, California</option> <option value="6">Denver, Colorado</option> <option value="7">Hartford, Connecticut</option> <option value="8">Dover, Delaware</option> <option value="9">Tallahassee, Florida</option> <option value="10">Atlanta, Georgia</option> <option value="11">Honolulu, Hawaii</option> <option value="12">Boise, Idaho</option> <option value="13">Springfield, Illinois</option> <option value="14">Indianapolis, Indiana</option> <option value="15">Des Moines, Iowa</option> <option value="16">Topeka, Kansas</option> <option value="17">Frankfort, Kentucky</option> <option value="18">Baton Rouge, Louisiana</option> <option value="19">Augusta, Maine</option> <option value="20">Annapolis, Maryland</option> <option value="21">Boston, Massachusetts</option> <option value="22">Lansing, Michigan</option> <option value="23">Saint Paul, Minnesota</option> <option value="24">Jackson, Mississippi</option> <option value="25">Jefferson City, Missouri</option> <option value="26">Helena, Montana</option> <option value="27">Lincoln, Nebraska</option> <option value="28">Carson City, Nevada</option> <option value="29">Concord, New Hampshire</option> <option value="30">Trenton, New Jersey</option> <option value="31">Santa Fe, New Mexico</option> <option value="32">Albany, New York</option> <option value="33">Raleigh, North Carolina</option> <option value="34">Bismarck, North Dakota</option> <option value="35">Columbus, Ohio</option> <option value="36">Oklahoma City, Oklahoma</option> <option value="37">Salem, Oregon</option> <option value="38">Harrisburg, Pennsylvania</option> <option value="39">Providence, Rhode Island</option> <option value="40">Columbia, South Carolina</option> <option value="41">Pierre, South Dakota</option> <option value="42">Nashville, Tennessee</option> <option value="43">Austin, Texas</option> <option value="44">Salt Lake City, Utah</option> <option value="45">Montpelier, Vermont</option> <option value="46">Richmond, Virginia</option> <option value="47">Olympia, Washington</option> <option value="48">Charleston, West Virginia</option> <option value="49">Madison, Wisconsin</option> <option value="50">Cheyenne, Wyoming</option> </select> </div> |
If you were to copy/paste this into your page body it should recreate the select menu. But for now it will appear just like a regular-old select menu, a regular-lookin' guy just like Bruce Wayne. To transform Bruce Wayne into Batman we need the Bat Signal! I mean we need JavaScript... but first let's take a peek at the CSS to see how my document is setup.
CSS Page Styles
I'm using a very slender page layout which is responsive but limited in width. The container wrapper has a max-width of 750px but can be resized smaller as needed. Each of the select fields will also resize using a simple media query.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /** page structure **/ #wrapper { display: block; max-width: 750px; margin: 0 auto; padding: 20px 15px; background: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .flexselect { width: 380px; padding: 4px; margin-bottom: 45px; } #simple { display: inline-block; width: 380px; } @media all and (max-width: 500px) { .flexselect, #simple { width: 200px; } } |
The class .flexselect is applied to our updated form field. The ID #simple is only used as a comparison to the field so we can see the differences in action. Both are fixed at 380px wide until the viewport drops below 500px when they're resized a little smaller.
My other CSS code is used to reset the page formatting for default margins, padding, and font styles. The header text uses Roboto Slab included from Google Web Fonts.
Also note that we could overwrite many of the common styles for each select input field. The flexselect.css stylesheet is fluid and easily pliable. You'd just need to copy a selector and then paste it into your own stylesheet. Overwrite each element with new properties as desired. Simple!
Flexselect & jQuery
Finally moving back into the HTML file we need to add one small block of JavaScript. There isn't a lot of customization available since the plugin is still very new. But to get it running all we need is a target on the .flexselect element and a call to the related method. Here's my code block located inside a <script></script> tag:
1 2 3 | $(document).ready(function() { $(".flexselect").flexselect(); }); |
Once the document finishes loading we run a single line of code. $(".flexselect") targets every select element with the class .flexselect. This is useful because you could build multiple select elements using this same class and still only need one line of code.
Then I'm calling a method flexselect() which is defined inside the jQuery plugin. There are some voluntary options which would require digging around in the original source code. One such example on the plugin's website is a bit of code which allows users to add their own entries into the select menu:
1 2 3 4 | $("select.flexselect").flexselect({ allowMismatch: true, inputNameTransform: function(name) { return "new_" + name; } }); |
Each key:value pair is denoted by a keyword and specific value. So for example allowMismatch will allow users to enter content which does not match any of the values. This would certainly be useful for testing and could work great on a live site if the functionality was needed.
Closing
Developers who want to push further into new web technology will enjoy this plugin. Since the autosuggest items are pulled from HTML it takes away worry of loading content through Ajax. Once the primary developer updates his documentation this plugin could be a real home run. So step up to the plate, take a swing and see what you can do. Also feel free to download a copy of my source code and use it for your own web projects.
First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.