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.

Did you like it? Help us spread the word!

72 Responses to "elSelect – customizable SELECT element."

  1. Will says:

    Sadly, it doesn’t work in Safari 3 on OSX :(

    a) the option dropdown is not 100% the width of the select. Not major but

    b) they are not clickable :P which is a bigger problem :P

  2. elPas0 says:

    don’t even know how to solve it cause have no ability to test it on Mac

  3. stilfx says:

    Try Safari for Windows: http://www.apple.com/safari/

    What version of mootools are you using?

  4. elPas0 says:

    i try Safari for Windows – all working fine :(

  5. stilfx says:

    Did you change something? I just DL’ed it again and it seems to be working fine now?? (Safari 3.0.4 in OSX 10.5.1)

  6. It is very good article and help me lots.

  7. SkyLu says:

    That great~ and I’m trying to find a control like this.

  8. wow, cool, I have always looked for it. Thx!

  9. Naveen says:

    Wow, Awesome really very nice i have tried this but i cont able to get this kind of out put very very nice thank you

  10. Alberto says:

    Nice!
    But…
    What happened to standard events like onChange? I do need them, am I missing something wrong or is it really missing? If so, can it be implemented?

    • zdick says:

      To add onChange event – find this line:
      this.hiddenInput.setProperty(‘value’,this.selected.getProperty(‘value’));

      and change to this:
      this.hiddenInput.setProperty(‘value’,this.selected.getProperty(‘value’));
      this.hiddenInput.fireEvent(‘change’);

  11. elPas0 says:

    events is not implemented now. but it is easy to add their support. as soon as i will have free time, i’ll add it

  12. Daan says:

    Nice dude !! Realy a BIG help….

    BUT I don’t get the values in my GET or POST??

  13. Daan says:

    Litte update:
    NEW (line 57-60):

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

    OLD (line 57-60):

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

    Really nice man.
    I mean, I was having a nightmare trying to make Niceforms work well, and finally I failed.
    With your feature, it only has taken me time to suit CSS so it will be ok in my layout.
    Many thanks!

  15. Sabre says:

    And one more thing: please consider implementing scrollbar in options container (maybe additionally even custom scrollbars?).

  16. Sabre says:

    Damn, it’s me again :D
    Just realized that it doesn’t work in IE6 – somehow IE6 have set offsetTop on 0
    o_O

  17. Sabre says:

    Additionally, it would be useful, if select is self-checking if to show options container above or under select box. Sometimes, if you scroll window, container goes behind screen or (even worse) – when website is short but options container is tall, it will ‘resize’ window. I hope you know what I’m talking about ;). Main aim is to put options container over select box if there is no place for it under select box.

    This works fine for me:

    var toppos;
    toppos = this.optionsContainer.parentNode.offsetTop - this.optionsContainer.getStyle('height').toInt()
    this.optionsContainer.setStyle('top',toppos+&quot;px&quot;)
    this.optionsContainer.getFirst().setStyle('width', width)
    this.optionsContainer.getLast().setStyle('width', width)
    

    I’ve added it in line 114, after

    this.optionsContainer.setStyle('width', width)
    

    and before

    }
    }

    ,

    This code I’ve posted has no control, so container will be always shown over select box.

  18. Sabre says:

    Okay, I spammed comments sections much, so I will spam it a bit more ;):

    I’ve added:

    this.containerHolder = new Element('div').injectInside($(this._select));
    this.containerHolder.setStyle('position','relative')
    

    just after:

    new Element('div').addClass('clear').injectInside($(this._select))
    

    and then changed:

    this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select))
    

    to:

    this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this.containerHolder))

    so now, we have our options container in "holder" positioned relativly. We will move this holder up in order to set our options container above select box. All you have to do in order to move selectbox above select box is add:

    var toppos;
    toppos = -this.optionsContainer.parentNode.parentNode.offsetHeight - this.optionsContainer.offsetHeight
    this.containerHolder.setStyle('top',toppos+&quot;px&quot;)
    

    at the end of onDropDown method.

    Works fine for me, but I have got height set for options container in CSS (with additionally set overflow:auto and all those optionsContainerTop, Bottom, and divs within them display:none;).

    You may like to write controller to control if set options container under ( top:0px ) or above select box. I think it would be best to place such controller in onDropDown method.

    I hope that I didn’t screw anything when describing.

    This work in IE and FF amd I hope in other browser too.

    BTW. Feel free to delete two previous comments of mine ;)

  19. Norbert says:

    Hello,

    this script is great! But the usability would be better if you could add the keydown events for ENTER and UP and DOWN – like you have in your normal firefox select element.
    best regards
    norbert

  20. divbyzero says:

    Hi. Forgive for my english.
    Thank you for such realization, use in its project.
    Here is little has ed the code, for dynamic use:
    Line: 65-67

    this.optionsContainer.addEvent('click', function() {
    if ( this.optionsContainer.getStyle('display') == 'block')
    	this.onDropDown()
    }.bind(this));
    

    Old Line:

    document.addEvent('click', function() {
    if ( this.optionsContainer.getStyle('display') == 'block')
    	this.onDropDown()
    }.bind(this));
    
  21. E.T.W says:

    Thanks for this, was a big help making my site a little bit cooler!

  22. Mange says:

    Really cool script!! But i?m also missing a scroll function if the option list is to long. With that kind of functionality it would be perfect :)

  23. elPas0 says:

    ok guys.
    first of all thanks for your responses
    i have some free time now so i will continue development to satisfy your requests

  24. Richard says:

    Daan’s solution worked for the post/get method however it ruined the bottom so here is what i did

    NEW (line 57-60):

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

    //use injectAfter instead of injectInside

  25. Zeguyz says:

    Nice script but the option selected is not being submitted when submit button is clicked. Any solution to get it working.

  26. Zeguyz says:

    Well done Richard I have only seen your solution after posting my comment … Cheers! have a beer :o)

  27. Raja Chandran says:

    Good control. Is it possible to select the first or second or third element via javascript. After submitting i need to change the element selection. Any solution will be helpful.

  28. Craig says:

    Has anyone updated elSelect to support keyboard access – i.e. – tab, up, down, enter keys?

  29. Praya says:

    This combobox does not submit. Can any one help i sorting the issue?

  30. Grendel says:

    hi,
    this script is great and i want to combine with this one http://www.electricprism.com/aeron/calendar/ , but i don’t know how to do it :( if somebody know please let me know.

  31. Christian Freear says:

    is this MooTools 1.2 compatible?

  32. gelo says:

    do we have jquery version of this?

  33. rav3n says:

    hi! cool script but i’ve found a bug:
    line 60:

    		}).injectInside($(this.options.container))

    should be:

    }).injectInside($(this.optionsContainer))

    so now we got hidden input with the value of option checked

    and we could add something like this after line 132

    [			this.hiddenInput.setProperty('value',this.selected.getProperty('value'));]
    
    document.location.href=this.hiddenInput.getProperty('value');

    so it will work like onChange

  34. Amir Meshkin says:

    I cannot get this to work with the latest version of moo tools.

    Please get in touch with me, and we may be willing to pay for a version that works well with mootools.

    Thank you in advance

  35. Awais says:

    post/get not working in IE7. tried Richard’s and Daan’s solution but not working in IE6 and 7

  36. Dylan Kennet says:

    Actually, it works pretty well in Mootools 1.2 once you change the .setText functions to .set(‘text’,
    For example:
    Line 95 old:

    this.selectedOption.setText(option.text);

    Line 95 new:

    this.selectedOption.set('text',option.text);

    Likewise, the .getText() function has been replaced with .get(‘text’)

  37. Phil says:

    I installed it. It look pretty but doesnt submit the information. The hidden input element is not properly created. Why is that?

  38. Charles says:

    BIG CON– You can’t have multiple boxes.

    I recreated the images in psd to style with different color, after spending three hours..bang.. I find out you can’t have multiple boxes

    But, nonetheless it’s a great little toy.. Good Job..

  39. Hey thank you for the script its nearly perfect. Just the Keyboard function didnt work :(

  40. Thank you for your script. Works nearly perfect except the Keyboard functionality

  41. DigiStyle says:

    @Charles – I think you can, as long as you use different ID’s foreach ‘new Elselect’. I found that then a problem appeared when you have the selectboxes above each other. The other boxes stay displayed when clicked.

    I added a some lines like below to the onDrowDown piece (in the else construction)

    var t_all = document.getElementsByTagName("div");
    var hideDiv = false;
    for (var i_all = 0; i_all &lt; t_all.length; i_all++)
    {
        if (t_all.item(i_all).id) if (t_all.item(i_all).id == this.options.container) var hideDiv = false; else var hideDiv = true;
        if ( (t_all.item(i_all).className == 'optionsContainer') && hideDiv ) t_all.item(i_all).style.display = 'none';
    }

    It’s not the best javascript, but it works for me. Other allready opened selectboxes close when you click another box…

  42. DigiStyle says:

    I rewrote the lines above, now it’s only

    var t_all = document.getElementsByTagName("div");
    for (var i_all = 0; i_all < t_all.length; i_all++)
    {
        if (t_all.item(i_all).className == 'optionsContainer') t_all.item(i_all).setStyle('display','none')
    }

    after the ‘} else {‘ in the onDropDown part

  43. Mohammad Arif Hossen says:

    Thanks

  44. Denitz says:

    add following CSS properties for "optionsContainer" CSS class – and here is scrolling:

    	max-height:130px;
    	overflow-y:scroll;
    	overflow-x:hidden;
  45. Max says:

    I’ve got an issue here. Tried applying the el-select on a web-page -worked great and looked amazing. Allthough ONLY while showing the page locally, when uploaded on server it doesn’t work. Any ideas? Please let me know.

  46. Ajans says:

    Thanks you too much. This is perfect and wonderful ! Thanks you again, you are professional designer.

  47. Brian D says:

    Is there a way to get the selectedIndex of a elSelect?

  48. srobert2 says:

    It is very good article. Helped me solve the problem.

  49. Marcin says:

    This script is ok!
    Interesting but simple solution to the problem.
    One could make the animation…
    HeY.

  50. Cyro says:

    Thanks!!

  51. Adriano says:

    I’m using in a ASP.Net, but i can’t get the values of the selected itens in the Post Back. Someone try do this?

  52. Chuck says:

    I been working on the equivalent of this plugin for jQuery, if anyone want to try it out, there’s an example and a download link in here:

    http://www.chiclosa.com/2009/05/elselect-jquery/

    I added "onchange" support for this version.

    If you got any questions or suggestions, you can contact me on twitter @davidmh

    Hope you like it!

  53. t34 says:

    I rewrote the lines from DigyStyle

    $$('div.elSelect div.optionsContainer').setStyle('display','none')
    

    Is that short enough?

  54. mot says:

    The download still has the vital options.container vs. optionsContainer problem (line 61) mentioned back in 2008. Suggest u change so this so the script will $_POST values straight out of the zip. took me a while to figure out what was wrong.

    Great script though, thx for the all the effort so that we can all get away from drab forms!

  55. Yvan says:

    I can ‘t seem to get elSelect this to work in IE.

    Here is my page:

    http://www.theseagatehotel.com/www.theseagatehotel.com/index.html

    It works fine in Firefox 3.5 and Safari 4.0 on the PC (after I changed "injectInside" to "injectAfter" on line #60 in elSelect.js) — but IE 8 is giving me the following error message:

    Message: ‘null’ is null or not an object
    Line: 32
    Char: 3
    Code: 0
    URI: http://www.theseagatehotel.com/www.theseagatehotel.com/js/elSelect.js

    Message: Object doesn’t support this property or method
    Line: 1
    Char: 1
    Code: 0
    URI: http://www.theseagatehotel.com/www.theseagatehotel.com/js/reservations.js

    I know that elSelect DOES in fact work in IE, since I am able to view the demo page in that browser without any problems. I suspect that IE just doesn’t like the fact that I have 3 elSelect dropdown boxes in the same page.

    How can I fix this to get it to also work in IE?

    Thanks,
    – Yvan

  56. benn says:

    seems like it does not work on latest Opera , no way to select, all other browsers ,

    IE6 IE7 IE8 , Safari , Chrome , FF2, FF3 work perfect

  57. Tanya says:

    Looks brilliant, thanks a lot. Does anybody know how I can use it for several selects and with a different width? Many thanks

  58. Ahmad Alfy says:

    This really helped me finishing one of my projects, Thanks
    There is a little typo error on the readme.txt on the downloadable file.

    It says :

    	window.addEvent('domready', function(){
    		var mySelect = new elSelect( {container : 'someId'} );

    It should be

    	window.addEvent('domready', function(){
    		var mySelect = new elSelect( {container : 'someId'} );
    		})

    Regards

  59. Ahmad Alfy says:

    @rav3n
    Thanks for your modification
    only one notice; You added the lines after line 132
    It should be added after 126. This way it will onOptionClick
    Best Regards

  60. Why dont you put this into the mootools forge? http://www.mootools.net/forge/

  61. Thanks you wonderful examples.

    I am using in my web site this tuttorials.

    Thanks again.

  62. Brad says:

    hey when i add this to the head of my document i get ‘there is a syntax error’ etc:

    window.addEvent(‘domready’, function(){
    var mySelect = new elSelect( {container : ‘someId’} );

    i am new to this stuff :)

  63. Maik says:

    Try also mootools custom form elements (http://customformelements.net). It’s an open source library to replace all kinds of form fields (including select, checkboxes, radiobuttons, text inputs, file upload…). It’s kinda modular and extendible.

  64. baiskirrish says:

    Content ease me to create pool

  65. gueniexia says:

    Hello all! I like this forum, i found multifarious compelling people on this forum.!!!

    Pronounced Community, regard all!

  66. Forkoff says:

    Thanks for this one. Very, very nice :D :D

  67. Daniel says:

    I have used the eselect. May i know how to save and retrive the values of selectbox in db using php code.

  68. Daniel says:

    I am using the elSelect. My problem is when i click on the “tab” the elSelect needs to be selected but now cursor moves to the next textbox. Could you help me how to solve this?

Trackbacks/Pingbacks

Do you have something to say?