Howto

Examples rule! See also Docs.

First of all, include in your page Mootools 1.4.1 or later, FancySelect.js source and FancySelect.css sheet.

<script type="text/javascript" src="Mootools.js"></script>
<script type="text/javascript" src="FancySelect.js"></script>
<link type="text/css" href="FancySelect.css" rel="stylesheet">

Create a <select> element in HTML, and add a data-image attribute to <option>, specifing image paths:

<select name="fruits" id="fruits">
	<option value="1" data-image="apple.png">Apple</option>
	<option value="2" data-image="banana.png">Banana</option>
	<option value="3" data-image="cherries.png">Cherries</option>
	...
</select>

Then, in your Javascript:

$('fruits').fancySelect();

About CSS styling. The script comes with a sample CSS file. You can easily change styles such as colors, backgrounds, borders, font and dimensions to customize FancySelect look, but be careful about the layout properties – some of them are essential to make FancySelect works as expected.