javascript - Align SELECT-OPTIONS text to right -

these screen shots of form developing.

i want design select box in form in such way text in options right aligned , after selecting option selected text shown should displayed shown in below image.

html code:

<select>     <option value="0" selected="selected" style="text-align: right;">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> 

try this.

http://jsfiddle.net/mfdtu/1/

html

<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

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

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

}

.selectbox select { z-index: 10; position: relative; border: none; background: none; outline: none; opacity: 0; height: 27px; -webkit-appearance: none; filter: alpha(opacity=0); width: 100%; cursor: pointer; 

}

.selectbox select option { padding: 3px; text-align:right; 

}

.selecttext { z-index: 9; position: absolute; right: 25px; display: inline-block; *display: inline; zoom: 1; padding-top: 4px; background: transparent; color: #000; text-align:right; 

}

.select-arrow { background: url(myarrow.png) no-repeat 50% 50%; position: absolute; display: inline-block; *display: inline; zoom: 1; height: 100%; width: 24px; top: 0; right: 0; }