Dress Up Your Select Elements with FauxSelect

By  on  
Faux Select

I received an email from Ben Delaney a few weeks back about an interesting MooTools script he had written. His script was called FauxSelect and took a list of elements (UL / LI) and transformed it into a beautiful Mac-like SELECT element. Ben asked me to take a look at his script and look to improve or class-ify it. I've done just that.


<select name="items" class="faux">
	<option> value="1">Item 1</option>
	<option> value="2">Item 2</option>
	<option> value="3">Item 3</option>
	<option> value="4">Item 4</option>
	<option> value="5">Item 5</option>
	<option> value="6">Item 6</option>
	<option> value="7" selected="selected">Item 7</option>
	<option> value="8">Item 8</option>
	<option> value="9">Item 9</option>
	<option> value="10">Item 10</option>

While Ben used a UL element, I chose to use a SELECT element so that the script degrades well.


#FS-Container * { margin:0; padding:0; }
#FS-Container 	{ position:relative; z-index:5000; width:230px; overflow:visible; }
#FS-HideLayer 	{ display:none; width:100%; height:100%; position:absolute; left:0; top:0; z-index:3000; background:#fff; opacity:0; -moz-opacity:0; filter:alpha(opacity=0); }
#FS-HideLayer.Visible {	display:block; }

#FS-Selector 	{ position:relative; display:none; overflow:visible; z-index:5000; left:0; top:3px; }
#FS-Selector.Visible { display:block; z-index:5000!important; }
#FS-Selector .Shadow { position:absolute; display:block; }	

#FS-Selector #FS-NW { width:11px; height:9px;  top:-9px; left:-11px; background-image:url(FauxSelect/fs-nw.png); background-position:top left; background-repeat:no-repeat; }
#FS-Selector #FS-N  { width:100%; height:9px;  top:-9px; left:0; background-image:url(FauxSelect/fs-n.png); background-position:top left; background-repeat:repeat-x; }
#FS-Selector #FS-NE { width:11px; height:9px;  top:-9px; right:-11px; background-image:url(FauxSelect/fs-ne.png); background-position:top left; background-repeat:no-repeat; }
#FS-Selector #FS-E  { width:6px;  height:100%; right:-11px; background-image:url(FauxSelect/fs-e.png); background-position:top left; background-repeat:repeat-y;}
#FS-Selector #FS-SE { width:11px; height:12px; bottom:-12px; right:-11px; background-image:url(FauxSelect/fs-se.png); background-position:top left; background-repeat:no-repeat; }
#FS-Selector #FS-S  { width:100%; height:12px; bottom:-12px; left:0; background-image:url(FauxSelect/fs-s.png); background-position:top left; background-repeat:repeat-x; }
#FS-Selector #FS-SW { width:11px; height:12px; bottom:-12px; left:-11px; background-image:url(FauxSelect/fs-sw.png); background-position:top left; background-repeat:no-repeat; }
#FS-Selector #FS-W  { width:6px;  height:100%; left:-11px; background-image:url(FauxSelect/fs-w.png); background-position:top left; background-repeat:repeat-y; }

#FS-Selector	{ padding:0; margin:0; }
#FS-Selector li { font-family: "Hevetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 11px; line-height:11px; color:#444; display:block; padding:2px 15px; margin:0 -5px; }
#FS-Selector li.Selected { background:url(FauxSelect/fs-li-highlight-checks.png) left bottom no-repeat; }
#FS-Selector li:hover 	 { background:url(FauxSelect/fs-li-highlight-checks.png) left top repeat-x; color:#fff; }			
#FS-Selector li.Selected:hover { background:url(FauxSelect/fs-li-highlight-checks.png) left center no-repeat; }

#FS-Trigger			{ cursor:pointer; border:1px solid #999; background:#ddd; padding:3px; }

There's quite a bit of CSS involved, as you can imagine. I don't recommend modifying anything but the #FS-Trigger selector. The #FS-Trigger is the default look of the select box.

The MooTools JavaScript

	//faux select class
	this.FauxSelect = new Class({

		Implements: [Options,Events],

		options: {
			cssPrefix: 'FS-',
			triggerText: 'Select Something'

		initialize: function(elements,options) {
			//set options
			//set elements
			this.elements = $$(elements);
			//apply to default elements

		//applies the Faux look to every desired element
		apply: function(element) {
			//settings and shortcut vars
			var c = this.options.cssPrefix;
			//create the replacement DIV container
			var container = new Element('div',{
				id: c + 'Container'
			//create a hidden input with the same name to store the value
			var input = new Element('input',{
				value: '',
				type: 'hidden',
				name: element.get('name')
			//provide the "trigger"
			var trigger = new Element('span',{
				text: this.options.triggerText,
				id: c + 'Trigger'
			//provide the list
			var list = new Element('ul',{
				id: c + 'Selector'
			//inject the options into the list
				var li = new Element('li',{
					text: option.get('text'),
					'class': (option.selected ? 'Selected' : '')
				if(option.selected) { input.value = option.value; }
			//create the replacement elements
			var FSHideLayer = new Element('div', {
			    'id': c + 'HideLayer',
			    'html': ' ',
				'events': {
			        'click': function(){
			var nwShadow = new Element('div', {'id': c + 'NW', 'class': 'Shadow', 'html': ' '});
			var nShadow = new Element('div', {'id': c + 'N', 'class': 'Shadow', 'html': ' '});
			var neShadow = new Element('div', {'id': c + 'NE', 'class': 'Shadow', 'html': ' '});
			var eShadow = new Element('div', {'id': c + 'E', 'class': 'Shadow', 'html': ' '});
			var seShadow = new Element('div', {'id': c + 'SE', 'class': 'Shadow', 'html': ' '});
			var sShadow = new Element('div', {'id': c + 'S', 'class': 'Shadow', 'html': ' '});
			var swShadow = new Element('div', {'id': c + 'SW', 'class': 'Shadow', 'html': ' '});
			var wShadow = new Element('div', {'id': c + 'W', 'class': 'Shadow', 'html': ' '});
			var ShadowParts = new Array(nwShadow, nShadow, neShadow, eShadow, seShadow, sShadow, swShadow, wShadow);
			//Inject the created elements
			FSHideLayer.inject(container, 'after');
				el.inject(list, 'top');

			//The "trigger" and "hide" events
			trigger.addEvent('click', function(){

			//What to do when each link is clicked
			var listItems = list.getElements('li');
				FSLink.addEvent('click', function(event){
				    event.stop(); //Prevents the browser from following the link.
					var FSLinkId = this.getProperty('id');
					//This is where you do something with the returned ID for the selected item...
					input.value = FSLink.retrieve('value');
					alert('The value is ' + input.value);
		var FS = new FauxSelect('.faux');

There's quite a bit of MooTools involved. Once provided with the necessary elements, we:

  • Create a series of DIVS for the new layout
  • Create a list element containing all of the possible SELECT > OPTION values and labels
  • Add events to handle clicking on individual list items or the body (to hide the list).

A bravo and thank you to Ben Delaney for his work and allowing me to "classify" his great idea. It takes a lot of guts to ask someone to try to improve something -- I had a hard time doing so at first too. Ben's FauxSelect script is a great way to make ugly inputs look outstanding. Great work Ben!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

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

Incredible Demos

  • By
    PHP IMDB Scraper

    It's been quite a while since I've written a PHP grabber and the itch finally got to me. This time the victim is the International Movie Database, otherwise known as IMDB. IMDB has info on every movie ever made (or so it seems). Their...

  • By
    CSS Tooltips

    We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries...


  1. Nice, but few notes (as always :P ) :

    It would be better to use classes than IDs, so that you can have multiple FauxSelect elements on one page.
    event.preventDefault() would be more appropriate for line 99 as you might probably want the click event to propagate.

  2. Mike Henderson

    Is there a z-indexing issue? The border bottom on the #FS-Trigger is showing though the FS-Container/Selector.

    Nice work!

  3. Dan

    Reminds me of this one, based on Mootools as well…

  4. kolin

    Superb, the sooner we can style select box in css the better :)

  5. This is a lot of work for something that’s not as effective as the normal select box…I would not use something like this

  6. @Adriaan: Always so negative! Consider it a proof of concept or a taste of the future?

  7. I’m seeing lots of things like this popping up. Its great :)

  8. Ahmed

    I only dislike the fact that I can’t see the active selection.

  9. I’d add in cursor: default for the items so you don’t get the odd text select tool.

    And if we’re going with Mac style, Lucida Grande should be the first font since it’s the system font (13pt to be exact)

    Nice class!

  10. @adriaan
    You can’t hide an tag in some browsers, and sometimes you want to. This would be the only way to do it.

    There are certainly other things you can’t do with that you could do with this, while still wanting to maintain the standard user interface widget.

    That said, setting an option to disabled is usually good enough for me!

  11. MLaZz

    check the xhtml. the option tag is incorrect ( <option> value=”1″>Item 1</option> ).

    other than that, a great post.. as always! :)

  12. Alexander

    Great class! and very customizable via CSS.

    However, it would be nice to have multiselect.

    By the way, something like this but Facebook like?, just like the one for choosing groups for your friends?!


  13. karlos

    Not Firefox Friendly so I have doubts about Opera too.

  14. rafael

    I must add that code for the result of selection paste into a text area box and did not appear in a window ‘alert’?.

  15. This is really great. I’m going use it in my site. I’m sure my readers will love it.

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