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.
- Porting to Mootools v1.2 –
You need to replace setHTML, setText and other deprecated stuff to the new syntax.
- 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));
- 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.