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
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    Spoiler Prevention with CSS Filters

    No one likes a spoiler.  Whether it be an image from an upcoming film or the result of a football match you DVR'd, sometimes you just don't want to know.  As a possible provider of spoiler content, some sites may choose to warn users ahead...

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...


  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!