Option width wider than select box

Make arrow to show on the right hand side

[pinkypie]

This is exactly what I want it to be.
I want to set the option width to be wider than select itself.
However, I can't find a way to have the arrow shows on the right hand side as the normal select box is.
Any suggestions would be really appreciated.

<style type="text/css">

@media all and (min-width: 0px){
.os {
position:relative;
height:1.2em;
}
.os select {
position:absolute;
right:0;
}
}
</style>

<div class="os" style="width:180px;overflow:hidden;border-right:1px solid gray;">
<select dir="rtl">
<option dir="ltr" value="${name}">XXwwwwwwwwwwwwwww wwwwwwwwwwwwwwww</option>
</c:forEach>
</select>

</div>

[SuzyUK]

Hi pinkypie and Welcome to WebmasterWorld!

that's, *I think* about the best solution you will get, have never really seen a solution for this (only IE problem?)

do let us know if you do get it perfected :)