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>
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.