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.

SelectInspiration

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 100

  1. 1

    Hello!, mi name is Walter, thanks for DropDown!.
    I need help, i using MVC, when post, send value, how restore value selected in cast return the page??
    I need restore value selected then post. Thaks!

  2. 2

    Mary..these styles are just awesome! I really like them and would like to use them BUT..
    is there a way to execute a js-function instead of opening a link?

    Thx in advance!

  3. 3

    Guys, I solved link problem using data-class and jQuery

    $(document).ready(function(){
    $(“.selectOptions”).bind(“click”, function(ele){
    console.log(ele.currentTarget.textContent);
    console.log(ele.currentTarget.dataset.value);
    console.log(ele);
    switch(ele.currentTarget.dataset.value){
    }
    });
    });
    Option1
    Option2
    Option3

  4. 4

    Guys, I solved link problem using data-class and jQuery

    $(document).ready(function(){
    $(“.selectOptions”).bind(“click”, function(ele){
    console.log(ele.currentTarget.textContent);
    console.log(ele.currentTarget.dataset.value);
    console.log(ele);
    switch(ele.currentTarget.dataset.value){
    case 1: yourJSfunc(); break;
    case 2: yourJSfunc(); break;
    case 3: yourJSfunc(); break;
    default: break;
    }
    });
    });

    Option1
    Option2
    Option3

  5. 8

    Hey,

    I was hoping you maybe shed some light on an issue I have with this.

    I am trying to use this on a page that the link should update the results on the page using AJAX.

    Is it possible? Currently it is reloading the page time.

    Also when I update any of the other options using AJAX they work fine but the select box reloads using the browser default styling.

    Thanks in advance – awesome tutorial!

  6. 9

    Hi, nice form!! Love it!! I have a question, is there a way to use without the first element (like “select your language”) instead of that, i only need the firt flag active.

  7. 10

    Hi, My name is Cavin and I’m a junior web designer and a freelance graphic designer. I’m awfully new to designing websites so i use platforms like WordPress and other site building platforms, so I’d like to know how to add these awesome HTML styles into WordPress.

    Thanks in advance:)

Follow this discussion

Leave a Comment