Styling select box – SelectoMoo

Styling select box – SelectoMoo

Tuesday, January 19th, 2010 in Mootools

Styling select box - SelectoMoo Developed using MooTools 1.2, SelectoMoo is a plugin that replaces the default select box element from a form with a stylish, CSS/JavaScript based select box. It offers the possibility to completely change the appearance by only using CSS style sheets so changing design turns into a pretty simple task.

The behavior tries to mimic the one of a classic select element, meaning it supports keyboard navigation between form fields ( by pressing tab key ), it opens on label click, when opened navigation can be done by keyboard ( up, down, enter for selecting an option ) or mouse ( mouse wheel for navigation, click to select option ).

Once a selection is made, if the list is reopened by the user, the selected option gets highlighted to ease navigation and let the user know that a selection was made and what it was. Also for navigational purposes, there are different CSS classes for hovered entry and currently selected entry.

HTML for displaying the list is pretty straight forward. To ease styling, the plugin takes as one of the parameters the CSS class index used when styling the list. The only thing that needs to be kept in stylesheet when defining classes is what’s after .selectoMoo_… For example, if you want to rename your CSS classes to start with MySelect instead of selectoMoo, when you’ll define the CSS in your stylesheet you’ll replace all instances of selectoMoo with MySelect. HTML used to display the list is structured like this:
SelectoMoo list HTML

Implementation

To start using this plugin include into the head section of your pages the mootools framework and SelectoMoo.js and create a class instance to replace select boxes:

1
2
3
4
5
6
7
8
9
10
<script language="javascript" type="text/javascript" src="script/mootools-1.2.4-core.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-1.2.4.2-more.js"></script>
<script language="javascript" type="text/javascript" src="script/SelectoMoo_compressed.js"></script> 
<script language="javascript" type="text/javascript">
	window.addEvent('domready', function(){
		new SelectoMoo({
			element: 'country'
		});
	})
</script>

As you may have noticed, the example above uses only one parameter. Below is the whole list of parameters you can set for this script:

  • element: the select box ID that needs to be replaced (default:null)
  • css: CSS class index for styling the list (default:selectoMoo)
  • listHeight: height in pixels for styled list (default:120)

Tested on

Firefox 3.5.7 IE 8 Google Chrome 3.0 Safari 4.0.4 - Win XP

Was this useful? Show your support.

digg Styling select box – SelectoMoo

14 comments

  1. KoXmO says:

    A great Mootool plugin /exactly what I’m searching for/ – but select box does not work in IE6 and have problems with IE7.

    • I’ll have to test it in IE6. Tested only ie8, thanks for pointing this to me.

      Later edit

      Solved the bug. I’ve tested in IE6 and it looks fine. IE7 should be OK but if anything wrong, please let me know.

      • Dragan says:

        Nice script Costa , :)
        fix for none select in IE6 and IE7 is in css

        .selectoMoo_selected should be set as block and width 100% ,

        without this it is aiming only at the selected checkbox image width and height so it might take you few try’s to get the right position of it.

  2. Sergiu says:

    Damn, dude, you’re good!

    I’ve been reading this articles about MooTools and Dojo and somehow I got into your page.

    It’s people like you that make me feel proud that I’m romanian.

    Thanks for sharing the GOODIES!

    (A little thing, ’cause I do am a bugger: when typing the wtong captcha on this comment form takes me to such an ugly page… and I have to use the Back button. It’s annoying.)

    • Multumesc Sergiu :)
      About the comment feature on this blog, it’s some plugin I installed. Probably I should search for a better one. If you have any suggestions about this script ( selectomoo meaning ), please post them here. Somehow it seems to be a work in progress, it still needs testing. Thanks again, enjoy and have fun.

  3. Raman Sharma says:

    Hi Constantin,

    Great job man. it solved my problem. Thanks a lot.
    I’m having a problem with it. when I click on the dropdown button it takes me to the top of page and then I need to scroll down to the dropdown. Is there any solution for this?

    Thanks & Regards,
    Raman Sharma

  4. anielka says:

    Hi Constantin.
    It’s great script – Thanks a lot.
    what about licence (MiT or custom)? i will be proud to include it in my project (internal crm for my company). i want to got 100% legal software, so…
    I got same problem as Raman has. Is there any known solution for this bug?

    • Hi Anielka,

      Script is free to be used in any way you consider as long as you mention the author. I accept donations but they’re not a must, they will only help in developing this further more. About the problem you mention, it’s not solved yet, haven’t had the time lately to make updates but I’ll see what I can do about it.

  5. jose says:

    someone already put this code in wordpress?

    Thank You

  6. sri says:

    Most of the browsers doesn’t support customizing of select tag using css. But I find this javascript which can be used to style select tag. But as usual no support for IE browsers.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ I noticed an error on this that Onchange attribute dosen’t work

  7. Kirupananthan says:

    in the demo some time the option was not selected how will overcome from the issues

Leave a comment