Normal Select field:

Customized Select (simple):

The script replace the original <select> input with a hidden field and a bunch of divs and span. When the user select an option, the hidden field catch that value and passes it as a normal field of a form.

Here it is the generated code:
<input value="" name="customized" id="customized_customselect" type="hidden"> <div id="customized_iconselect">Select a city:</div> <div id="customized_holder"> <div id="customized_options"> <div title="venezia" class="selectitems"><span>Venice</span></div> <div title="milano" class="selectitems"><span>Milan</span></div> <div title="roma" class="selectitems"><span>Rome</span></div> <div title="torino" class="selectitems"><span>Turin</span></div> <div title="firenze" class="selectitems"><span>Florence</span></div> </div> </div>

Another example with images (note that source code is the same in all three examples):

How to implement

In your page <head>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/SelectCostumizer.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#customized').SelectCustomizer(); })</script>
#customized should be changed with your select #id

In your CSS style:
#customized_iconselect { border: solid 1px #a5ae8b; width:150px; padding: 5px; background-color: #C8EAFF; } #customized_holder { display:none; position:absolute; overflow: auto; width: 150px; padding:0 3px; } .selectitems { border-bottom: solid 1px #ddd; padding:3px; background-color:#EBF1D5; } .selectitems span { margin-left: 5px; } .hoverclass { background-color:#E8D1FF; cursor:pointer; } .selectedclass { background-color:#FFFF66; }
There are 3 div#id that allow you to customize as many select as you need, you only have to name them #yourSelectID_iconselect, #yourSelectID_holder and #yourSelectID_options

The select must have a title attribute in order to display the text (in the example above:<select id="adv" title="Select a city:">).

This script is under the Creative Commons BY-SA license.