Elegant Selects with Quick[select]

By  on  

Form elements have always allowed limited styling...which is why I hate working on form display.  And I started when form elements were virtually unstylable back in the Internet Explorer 4 days.  Of course we've come a long way but there's one element which is still somewhat difficult to style and isn't particularly elegant:  SELECT.  The element looks different from OS to OS and sometimes even browser to browser -- not ideal.

I recently found an awesome jQuery plugin to make the SELECT element more presentable, elegant, and stylable:  Quick[select].  Quick[select] turns SELECT options into clickable buttons with a traditional SELECT as a fallback.

The CSS

Quick[select] comes with a base stylesheet but you can style the option "buttons" in any way you'd like, as you can see in my demo.  Here are my basic styles:

.btn-group .btn {
	border: 1px solid #ccc;
	background: #eee;
	padding: 4px;
	border-radius: 4px;
	margin: 0 10px 0 0;
	font-size: 14px;
	display: inline;

	transition: background .3s, border-color .3s;
}
.btn-group .btn.active {
	background: #7ac9ed;
	border-color: #0c7bb6;
}

Quick[select] also has a helper for bootstrapped-driven sites, if that's your stack.

The JavaScript

Using Quick[select] is easy:  add the plugin to the page and then use the jQuery plugin syntax to create instances for given SELECT elements:

jQuery('#wakeup-time').quickselect({
	activeButtonClass: 'btn-primary active',
	breakOutValues: ['06:30', '07:00', '07:30', '08:00'],
	buttonClass: 'btn btn-default',
	selectDefaultText: 'Other',
	wrapperClass: 'btn-group'
});

The most important option is breakOutValues which generates clickable buttons for popular choices (specified by you) within the SELECT element.  You'll also want to set a custom selectDefaultText value for when the button which triggers the full display of the options.

Quick[select] is the best SELECT alternative that I've seen in a long time.  This plugin allows for elegant, stylish, and usable SELECT elements.  Go check it out and do your users a favor!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

  • By
    Input Incrementer and Decrementer with MooTools

    Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...

Discussion

  1. Hi David. Thanks for highlighting my plugin!

  2. MaxArt

    This is a nice alternative way to display multiple options, but if a classic combo is needed I’d rely on the CSS appearance property, and fall back to the unstyled element for those browsers that don’t support it (hint: you can even use @supports in this case).

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!