What we need to do is to keep the select box and a span in a div. Then we keep the select box over the span and make the opacity of the select box as 0. Span can be styled reliably and hence will give the user the feel that it is the select box that has been styled. Now, with jquery we need to write events which will populate the span with the values of the select box. The events will be for click and for key up(so that u can select with movement of keys in the keyboard).
Span Click Me
The code:
<div class="container">
<span style="background: none repeat scroll 0% 0% rgb(238, 238, 238);
display: block; width: 100px;">
Click me
</span>
<select id="selBox" style="margin-top: -20px;
opacity: 0; position: absolute; width: 100px;">
<option>first option</option>
<option value="second option">second option</option>
<option value="third option">third option</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$("#selBox").bind({
"change": function() {
$(this).prev().text($(this).find(":selected").html());
},
"keyup": function(){
$(this).prev().text($(this).find(":selected").html());
}
});
</script>
