Cult-Foo

elSelect – customizable SELECT element.

Tags: ,

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

Click on screenshot to see it in action. Example will appear in a new window because it uses MooTools library which conflicts with the Prototype library used at this site. And “mootools is not trying to be conflict free” ( more info – http://forum.mootools.net/viewtopic.php?id=1964#post-9356 )

elSelect - customizable SELECT element.

Why i did it? Well, you all know that select element and IE have problems.
They are :

  • SELECT ignore z-index and will display over any other position element (fixed in IE7) ,
  • disabled property for OPTION tag do not work in IE
  • you cant change look of standard SELECT using CSS

This class successfully solve all problems, but elSelect is still in development……

Future Enhancements(Hopefully)

  • Create a select from an array instead of select element.
  • Add functions to dynamically add / remove rows.
  • Options sorting

elSelect is made with MooTools Framework.

You need following components:

  • core ( core )
  • class ( all )
  • native ( all )
  • element ( event, filters, selectors )
  • window ( domready )

It takes standard DOM select element and make new control from it. What I want you to know about elSelect is that:

  1. elSelect is fully customizable via CSS file.
  2. elSelect takes standard select as a parameter, so you do not need to rewrite your HTML
  3. elSelect works on Firefox/IE/Opera. Anyone who has ability to test it on Safari please write if it works.

How to use it

You need to download elSelect.
Inside the pack you will find:

/js

  • elSelect.js – the class itself,
  • mootools.js – mootools framework

/theme

  • style.css – default stylesheet containing all the possible classnames you can style
  • top_center.gif , top_right.gif , top_line.gif , top_left.gif – images for top round corners
  • select_bg.gif , select_arrow.gif – for styling select element
  • bottom_right.gif , bottom_left.gif , bottom_center.gif – images for bottom round corners

In the head of your HTML insert

<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/elSelect.js" type="text/javascript"></script>

Ok, now class is included, so we can create new element

<script type="text/javascript">
window.addEvent('domready', function(){
var mySelect = new elSelect( {container : 'someId'} );
</script>

and HTML code like this:

<div id="someId">
<select name="test">
<option>-select number-</option>
<option value="1" class="icon_1">one</option>
<option value="2" class="icon_2">two</option>
<option value="3" disabled="disabled">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
</select>
</div>

And in the result the structure of new control will be following

<div id="mySelect">
<div class="elSelect">
<div class="selected">
<div class="selectedOption">-select number-</div>
<div class="dropDown"></div>
</div>
<div class="clear"/>
<div class="optionsContainer">
<div class="optionsContainerTop">
<div>
<div></div>
</div>
</div>
<div class="option selected">-select number-</div>
<div class="option icon_1">one</div>
<div class="option icon_2">two</div>
<div class="option disabled">three</div>
<div class="option">f</div>
<div class="option">five</div>
<div class="option">six</div>
<div class="optionsContainerBottom">
<div>
<div></div>
</div>
</div>
</div>
</div>
<input type="hidden" name="test" value="" >
</div>

If you noticed, to add an icon to the option you need to add a class to option element.

<option value="1" class="icon_1">one</option>

Here goes example and download link.

Managed WordPress Hosting

Did you like it? Help us spread the word!

Do you have something to say?