Inspiration for Custom Select Elements

Some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style.

From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.

Today we’d like to share some inspiration for custom select styles with you. In forms where we’d like to use custom styles for the input elements, we can use JavaScript libraries that transform the HTML elements into a structure that allows us to do some better styling, especially for more complex inputs like the select element. Once a custom structure is in place, the possibilities are really endless and the aim of creating a better experience for the user can be reached more easily.

What kind of style is used depends of course on what is represented and what you want to know from your user using the input element. When replacing the select element with a custom structure it is very important to keep the new element accessible. Providing a label and focus styles are just some of the things you should keep in mind. Read more about some form accessibility in the HTML Techniques for Web Content Accessibility Guidelines 1.0 by the W3C.

For demo purposes, we are using a very raw custom script in our examples where the custom select element can be accessed by i.e. using the TAB key and hitting space. Note that we haven’t provided any substantial focus styles.

Please note that some of the styles are experimental and for the sole purpose of showing what’s possible (in modern browsers).

In the demos we use icons from the following icon sets: Ionicons, Font Awesome, Linecons and Maki.

The SVG flags used in one of the demos are from the Flag Webicons Set by Sean Herron.

The round icons used in one of the demos are from the free Ballicons 2 set by Pixel Buddha.

Let’s take a look at our custom select script. Having a select element like the following

<select class="cs-select cs-skin-rotate">
	<option value="" disabled selected>Choose your option</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
</select>

… we’ll transform it into this structure:

<div class="cs-select cs-skin-rotate">
	<span class="cs-placeholder">Choose your option</span>
	<div class="cs-options">
		<ul>
			<li data-option data-value="1" class="cs-selected"><span>Option 1</span></li>
			<li data-option data-value="2"><span>Option 2</span></li>
			<li data-option data-value="3"><span>Option 3</span></li>
		</ul>
	</div>
	<select class="cs-select cs-skin-rotate">
		<option value="" disabled selected>Choose your option</option>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
	</select>
</div>

We are keeping the actual select element because we’ll actually use it to set the selected value, which in turn will be submitted if we submit a form.

The “placeholder” is recognized by being disabled and having an empty value. It’s not a necessary option, it can be left out and the first option would instead be added to the first list item, or the one that has the selected attribute.

Optionally, we can define a data-link and a data-class in an option of the select element. The link option will allow to actually open a hyperlink when clicking a list item. When custom classes are needed on a list item, the data-class attribute can be used.

The following options are available:

newTab : true,
// open links in new tab (when data-link used in option)

stickyPlaceholder : true,
// when opening the select element, the default placeholder (if any) is shown

onChange : function( val ) { return false; }
// callback when changing the value

The stickyPlaceholder defines if the default placeholder text is shown every time we open the select element.

The basic styles for our examples are in the cs-select.css. Here we define some necessary styles for making the custom select look like a plain dropdown. The specific skin classes need the skin style sheet and an example for a specific skin is the following (border example):

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
	src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
		url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
		url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

div.cs-skin-border {
	background: transparent;
	font-size: 2em;
	font-weight: 700;
	max-width: 600px;
}

@media screen and (max-width: 30em) {
	.cs-skin-border { font-size: 1em; }
}

.cs-skin-border > span {
	border: 5px solid #000;
	border-color: inherit;
	transition: background 0.2s, border-color 0.2s;
}

.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
	font-family: 'icomoon';
	content: 'e000';
}

.cs-skin-border ul span::after {
	content: '';
	opacity: 0;
}

.cs-skin-border .cs-selected span::after {
	content: 'e00e';
	color: #ddd9c9;
	font-size: 1.5em;
	opacity: 1;
	transition: opacity 0.2s;
}

.cs-skin-border.cs-active > span {
	background: #fff;
	border-color: #fff;
	color: #2980b9;
}

.cs-skin-border .cs-options {
	color: #2980b9;
	font-size: 0.75em;
	opacity: 0;
	transition: opacity 0.2s, visibility 0s 0.2s;
}

.cs-skin-border.cs-active .cs-options {
	opacity: 1;
	transition: opacity 0.2s;
}

.cs-skin-border ul span {
	padding: 1em 2em;
	backface-visibility: hidden;
}

.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
	background: #f5f3ec;
}

Take a look at the demos and see some examples of how a custom select can be styled.

We hope you enjoy them and find them inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 109

Comments are closed.
    • Thanks a lot for pointing that out! Forgot to add the correct pointer events… it’s fixed now, thanks again! πŸ™‚

  1. Nice Mary, I recommend you looking at Select.js for select boxes as well. It’s an extension on tether.js which ties the dropdown to the box, which is great for devices that have a small height or dropdowns with a lot of options.

  2. Wow!

    I’ve been looking for something like this for a long time. Fantastic looking.

  3. Thanks a lot for the insipration, amazing ideas as usual from you! Especially <3 the circular one πŸ™‚

  4. Thank you so much, your work gives me so much inspiration. Heart you πŸ™‚

  5. Very great!!
    but Custom Select Elements is not working with IE9. it should be working at least IE9. πŸ™ is there anyone like me?
    I hope I can find some solution.

    Thanks anyway!!

  6. Fantastic,

    Surely, this is the best ever demo and tutorial released by Codrops…

  7. Hi Mary,

    For me, the jQuery change event is not getting called when these select box item changed.
    Any fix?

    Regards
    Nalan

  8. What browser compatibility can I expect with these elements? I cannot test on anything other than a new Mac unfortunately with modern browsers. Are we talking IE8, IE9, etc?

    • Definitely not IE8. not sure with IE9 but if the demo use transform-style: preserve-3d, then say no to IE9.

  9. As usual, a great tutorial and freebie. Thanks a lot Mary Lou for making web so beautiful.

  10. Thanks for writing this tutorial – as the web evolves it’s important we evolve the usability of native HTML elements. Being able to blend it with your brand and colors is important.

  11. As always, awesome job! πŸ˜€

    I just hope people don’t take this and use it on production projects. It breaks “normal” select behaviors and doesn’t work with screen readers.

    • Hi Robert, thanks for your feedback! I hope it’s obvious that this solution is for demo purposes to provide inspiration for the looks and effects. But I’m curious, what do you specifically mean with “breaking the “normal” select behaviors”? We’ve implemented the basic default behavior of a select, i.e. pressing space to open it, arrow navigation, ESC to cancel the selection when it’s open, enter or space to select and option… We also consider optgroup usage (not all skins are suitable, though). Of course, there are things we did not consider, like using multiselect. How did you make DropKick screen reader accessible? I think it’s very important and I’d add that to our little script so that all the basics are covered.
      Thanks again and cheers, ML

  12. Unfortunately, changing the original select value with javascript does not affect changes of this custom select value as many other custom selects too.

  13. Very awesome, question for you though. I wish your variable names (in your JS) were more descriptive. I often look at your JS to try to learn from it but sometimes its hard to follow because the names are not descriptive. Just my 2 cents though. Great work!

  14. Hey Mary, I was very interested in this one. I was wondering if there was a way to achieve this with one click of a live, to display option but as links in the same way? I didn’t want to hack the code to pieces lol, I figured you’d know the way!

  15. WOW .. really cool tutorial. I wish you will come up with more such tutorial πŸ™‚

  16. Really inspiring πŸ˜‰
    BTW, glad to see all examples work smooth in Safari 5.1

  17. How can i use the slide effect for variable number of items? As i see background transform is fixed: -webkit-transform: scale3d(1.1,3.5,1), what if i have more items. I cannot set ::before selector dynamically πŸ™

    Thank you.

  18. Hi, is it possible to do “slide effect” from your demo without javascript?

  19. Hi,
    I really like it!
    I want to do something like this but i don’t really understand it.
    I have a basic knowledge of CSS, HTML, JS and JQuery but don’t know how to start?
    Could anyone help me by styling a custom select box?
    I have the Markup and the CSS but it’s not styled…:/