10 Handy Shortcuts for Customizing Any Selectable UI Element

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.

Chosen

From regular dropdowns to option groups and multi-select fields, Chosen has it all. This free plugin was created by Harvest, and it has one of the simplest interfaces you could ask for.

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.

SelectBoxIt

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.

Selectric

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.

customSelect

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.

JS Animated Buttons

Moving on from traditional plugins, let’s take a look at this beautiful animated effect that 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.

The real magic occurs when selecting any of the inputs. When clicking a checkbox, the inner checkmark icon will animate up into view. The actual box itself also becomes recessed into the page as if it were pressed down into a 3D plane. All of the animation effects are controlled via JavaScript and should be a perfect addition to fully-featured web forms.

Just keep in mind that this code snippet was not written as a jQuery plugin. It does rely on jQuery, but the actual JavaScript is only ~20 lines long.

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.

Switchbutton.js

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

Another alternative can be found on CodePen which offers code for building your own ON/OFF switches using nothing but HTML/CSS. Without JavaScript, there is less support for legacy browsers–however the switches can function with much less code.

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).

Upload fields have been the most difficult to customize because they don’t have traditional HTML elements. The input field and the button itself are contained together in the same element. Most of the time, it requires a bit of tricky JavaScript to get a custom design working properly.

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.

NiceFileInput.js

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.

All of the code is meant to run flawlessly in all browsers, and it’ll degrade gracefully when loaded into a browser without JavaScript. Using a JavaScript handler, you simply target the input field with a class or ID, and then customize the options accordingly. The final result can be surprisingly attractive and seems to work well in most circumstances.

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!

Final Thoughts

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.