Styling select box – SelectoMooTuesday, January 19th, 2010 in Mootools
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:
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
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)