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:

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

Related posts

• YouTube player embed with attached playlist (26)
• Wordpress YouTube playlist plugin (11)
• Wordpress 2.7.1 featured articles plugin (147)
• SlideItMoo v1.1 – image slider (285)

Was this useful? Show your support.