Here is a helpful solution for you to try out.
Click here to view the solution
For the HTML part:
<select id="mySelect" dir="rtl">
<option value="0" selected="selected" >EqualsTo</option>
<option value="1">LessThan</option>
<option value="2">GreaterThan</option>
<option value="3">LessThanEqualsTo</option>
<option value="4">GreaterThanEqualsTo</option>
<option value="5">Between</option>
</select>
JS code snippet:
function InitializeSelect(elem) {
$("#" + elem).each(function () {
$(this).wrap('<div class="selectbox"/>');
$(this).after("<span class='selecttext'></span><span class='select-arrow'></span>");
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
$(this).change(function () {
var val = $(this).children("option:selected").text();
$(this).next(".selecttext").text(val);
});
var selectId = $(this).attr('id');
if (selectId !== undefined) {
var linkClass = selectId;
}
if (linkClass) {
$(this).parent('.selectbox').addClass(linkClass);
}
});
}
$(document).ready(function(){
InitializeSelect('mySelect');
});
CSS styling:
.selectbox {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
border: 1px solid #CCC;
background: none repeat scroll 0 0 #FFFFFF;
min-width: 160px;
max-width:220px;
width: auto;
...
... and so on (CSS continued for brevity)