After seeing couple of implementations of replacing the default form checkboxes and radio buttons I was on a search for cross-platform select dropdown which can be fully styled with CSS. Unfortunately there are not so many options and the best I could find is elSelect:

elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

However I believe there is plenty of space for improvements.

  1. Porting to Mootools v1.2 –

You need to replace setHTML, setText and other deprecated stuff to the new syntax.

  1. Instead of creating new input just move the original (otherwise all events connected with the DOM element are lost and it does not work with .NET forms) –

Replace:

this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')
		}).injectInside($(this.options.container))

with:

this.hiddenInput = this.source.injectAfter($(this.options.container));
  1. Various optimizations + autocomplete functionality and keyboard shortcuts (Tab-ing through the form).

Also I’m checking the browser agent since under iPhone it is better not to replace the select and adding some code graceful degradation:

var addCustomSelect = function(wrapper){
	if(!Browser.Platform.ipod){
		try{
			var mySelect = new elSelect( {container : wrapper});
		}catch(e){}
	}
	if ($(wrapper).getElement('select')) $(wrapper).getElement('select').setStyle('display','inline'); // Select is still here - degrade gracefully
}
if($('cust-sel')) addCustomSelect('cust-sel'); // Call as soon as possible

Other good tip is to have the select (you are replacing) with style visibility:hidden so it does not flicker when loading.

You can download my modified version from here. It has 1 and 2 applied plus some other minor changes. Still it is a good idea to diff the original and my version since I have custom modification that you might not need.

Comments

Comment by Jesse on 2008-09-04 03:50:24 +0300

Do you have a version available with the #3 changes implemented? I could sure use tab support :)

Comment by Peter on 2008-09-04 10:16:25 +0300

you can add tabbing by just putting tabindex=”x” to the div that surrounds the custom select

Comment by Neb on 2009-01-26 05:22:39 +0300

I noticed a really good one over at http://www.mooforum.net/ called SimpleSelectStyle.

Comment by Peter on 2009-01-26 10:15:43 +0300

yeap, seems to be a good one

Comment by brainac on 2009-12-23 20:07:15 +0300

It’s good to add how to use it, because (at least at the moment) original site is down. I had to use Google cache to find it out (I have quite basic knowledge of JS)

Comment by Giorgio on 2010-11-24 11:41:27 +0300

hi,
i try your script but it not work with mootols 1.3 can you upgrade it ?

Comment by Denise on 2011-02-22 20:32:26 +0300

I try with mootools 1.3 and doesn´t work too.

Comment by manu on 2011-07-11 09:37:09 +0300

Just adding

Implements: Options,

before the options array
options: {
container: false,
baseClass : ‘cust-sel’
},

should fix it.