Customizable Form Select / Dropdown Replacement with Mootools

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.

2. 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) –


this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')


this.hiddenInput = this.source.injectAfter($(this.options.container));

3. 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){
			var mySelect = new elSelect( {container : wrapper});
	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.

Be Sociable, Share!

Tags: , , ,

8 Responses to “Customizable Form Select / Dropdown Replacement with Mootools”

  1. Jesse Says:

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

  2. Peter Says:

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

  3. Neb Says:

    I noticed a really good one over at called SimpleSelectStyle.

  4. Peter Says:

    yeap, seems to be a good one

  5. brainac Says:

    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)

  6. Giorgio Says:

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

  7. Denise Says:

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

  8. manu Says:

    Just adding

    Implements: Options,

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

    should fix it.

Leave a Reply