Online forms are some of the most common interfaces for user interaction. Many web fields rely on user input from the keyboard, but others have prefilled answers waiting to be selected. These may include checkboxes, file inputs, or even select dropdowns.
Although select menus are fantastic they can also be a little boring. All web design should be functional, but great web design incorporates pleasant aesthetics too.
The following ideas center around selectable UI elements for website layouts. Web designers often like to design their own custom fields which best-suit the project at hand. Select menus and similar inputs can be tricky to customize, but modern techniques make the process a whole lot easier. Check out these plugins and code snippets which can be perfect for customizing any form field.
Select Menu Designs
First and foremost, I’ve put together a series of select menu customizations. Select menus are known far and wide by folks who have some experience on the web, so it’s no surprise that they’re popular.
One of the quickest ways to customize a select field is through a plugin. jQuery seems to be the most popular choice because it’s open source and has a lot of great support. If you’re looking for a select menu design alternative, these plugins are a great place to start your search.
Each select menu includes a custom design which follows similar ideas that you’d find in a generic select menu. The item hover effect has also been customized following a Bootstrap style of design.
But Chosen is truly magnificent because of its various features. Select menus can behave like typical dropdown fields or you can add some extra features. The search field is a nice touch if you have a lot of options in one menu. Alternatively you can allow users to select multiple values at a time and submit them all to the form. Chosen is great not just for it’s UI style but also for the added UX features.
For a plugin with more detailed features, take a look at SelectBoxIt.js. This free library runs on jQuery and includes custom codes for text styles, animations, icons, and even scrolling events. These select boxes will behave exactly like HTML select menus but with additional features.
The default design style also looks very similar to Twitter Bootstrap. The reason is because SelectBoxIt actually runs on Bootstrap. However the design features are customizable just like all the other Bootstrap theme elements.
Web developers who need a more user-oriented solution need not look much further. SelectBoxIt can run over jQuery UI and even supports jQuery Mobile for responsive layouts or mobile webapps–definitely a great choice for the higher-end of development.
jQuery Selectric is a modern and fascinating plugin which is super easy to add into any website. The design and features behave like a native select menu without the need for a ton of extra JS libraries. Features include a keyword search, custom theming, and keyboard navigation.
Take a look at the Selectric demo page to see it live in action. I am truly impressed with this plugin because it works in such a clean yet customizable manner. Selectric is great for all developers whether they just need a quick solution or if they want to hard code a select menu dropdown.
In regards to traditional select menu plugins, the smallest and most lightweight option could very well be customSelect. The plugin’s page on GitHub covers everything you’d need to know about general setup, requirements, and parameters for function options.
CustomSelect was built with accessibility in mind. It can be used on mobile responsive websites and legacy browsers dating back to Internet Explorer 7+. The design itself is rather stale, but it’s still a brilliant choice for designers who just need a quick and easy solution. If you’re looking for more information, be sure to check out the customSelect GitHub repo.
Checkboxes & Radio Buttons
Select menus are nothing more than the dropdown alternative to radio buttons. These radios are meant to display a series of pre-coded answers to a question and the user may only select one choice.
Select menus behave in the same way, and radio buttons are another tactile interface element for selectable design. Checkboxes are often accompanied by radio buttons, and these can be just as useful under similar circumstances.
I’ve yet to find a greater custom checkbox/radio button library beyond iCheck. The whole library was built for crafting unique designs which are universally supported in all browsers.
Elements can handle mouse clicks and touch events which means Android/iOS users may also bask in the beauty of iCheck. And much like traditional HTML5 form elements, iCheck supports all keyboard interactions. More advanced developers will find a series of plugin options and custom methods for callbacks.
Yet the true beauty of iCheck lies in the design. Take a peek at some of the live demos on the plugin homepage to see it in action. You can even design your own custom theme from scratch to blend into any website color scheme.
JS Animated Buttons
Moving on from traditional plugins, let’s take a look at this beautiful animated effect which connects directly to HTML checkboxes and radio buttons. Take a gander at this CodePen entry created by Mahmoud Elmahdi. All of the inputs run over HTML5 and use a series of CSS properties for custom display styles.
Pure CSS Checkboxes/Radios
For a different alternative, let’s take a peek at some pure CSS checkboxes and radio buttons. You can see the live code here which I customized from the original. My customization uses checkmark icons instead of x’s because they seem to fit better into the design. But if you know enough about CSS, you can change the icon by editing unicode number values in the CSS content property. I simply adore this effect and the animation. It’s amazing to see how much is possible using only pure CSS.
However there is one small downside when it comes to font support. Unicode fonts are used to create these icons in the checkboxes and radios. However a Unicode font family won’t be found on all computers. This Stack Overflow answer goes a bit more into detail about the problem. But there are workarounds, and if you spend enough time debugging, then you can get these CSS inputs working on a majority of operating systems and web browsers.
On/Off Slider Switches
A newer element which emerged from the smartphone era is the ON/OFF switch. This effect was launched on the original iOS for iPhone and has since become a staple in many interfaces. Although these ON/OFF sliders do make more sense for mobile users, they can still work great from a desktop or laptop computer.
The difficulty comes with finding a method for implementing these switches. Although there are dozens of plugins and code snippets waiting on the Internet, the following two codes are my suggested choices.
One of the simplest and most recognizable libraries has to be jQuery Switchbutton. Each of the ON/OFF switches are designed to mimic the original iOS which has now become integrated into design culture.
All of the switches are created using checkboxes with custom jQuery features. But in this case, the checkbox elements are hidden in lieu of displaying a customized ON/OFF slider. You have the option of writing your own callback methods or even controlling the animation feature of the slider itself.
Best of all, you can choose between a handful of different switch designs which harken back to the original iOS. If you’re looking for a plugin to recreate a sleek Apple-style ON/OFF switch, then Switchbutton is the easiest choice.
Pure CSS iOS7 Switches
This particular snippet was designed to mimic the flat iOS7 switch design. They can work on most smartphone browsers and should run on all modern desktop browsers. Pure CSS can be very tempting because of how much is possible through just a little bit of code.
The only thing to keep in mind is these snippets are not part of any plugin. So you will need to copy/paste and customize the code accordingly to get it working on your own website.
Custom Upload Fields
Lastly I want to share a couple resources for customizing HTML upload fields. These are still used commonly in social media websites or forms that require media uploads (images, videos, .zip files, etc).
The following resources should prove useful to anyone who’s curious about custom input design. If you’ve never customized an upload field before, then it will take a little practice. Yet for those who love customizing page elements, it will be time well spent.
The jQuery plugin Nice File Input is completely free and very useful. It offers a more streamlined method of customizing the upload field by breaking it down into 3 areas: the button, the text field, and a surrounding div element.
Custom File Input Plugin
The screenshot above is a demo hosted on CodePen. It’s using the jQuery Custom File plugin to create dark-themed file upload fields. Everything is completely open source and very easy to manage.
You can test out the full upload page and try the fields to experience their typical behavior. I like how the upload field uses an icon to express the type of file being uploaded (archive file, video file, audio file, Word document, etc). This is perhaps one of the most detailed examples of a custom HTML upload field I’ve ever seen.
Unfortunately it’s very difficult to find quality examples of file input customizations. Even with modern standards, it’s just hard for developers to create uniform fields that look nice and still function in all browsers. But there are methods online if you search hard enough, and if you’re curious, then you should dive right in and see what you can build!
Web designers and developers are always looking for the next best tools or resources for crafting pristine layouts. Design patterns have changed rapidly over the years to improve upon general principles and overall user experience. I hope these free plugins and code snippets will provide value to developers who are looking to customize selectable interface elements. And if I’ve forgotten any cool libraries or snippets, feel free to share your ideas in the post comments.