Inspiration for Custom Select Elements with CSS3 & JavaScript

Download   Demo

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

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

1 2 3 4 5 6

<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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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:

1 2 3 4 5 6 7 8

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

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

Inspiration for Custom Select Elements with CSS3 & JavaScript