How to right-align options in a DropDownList?

Question

I'm trying to right-align the options of a DropDownList, but it doesn't seem to work.

HTML:

<asp:DropDownList runat="server" CssClass="MyDDL">
    <asp:ListItem Text="1234"></asp:ListItem>
    <asp:ListItem Text="123"></asp:ListItem>
    <asp:ListItem Text="12345"></asp:ListItem>
</asp:DropDownList>

CSS:

.MyDDL
{
    width:100px;
    text-align:right;
}

The CSS is being applied (the width of the DropDownList is increased to 100px), but the options inside remain left-aligned.

What's wrong here?

---

Update

It works perfectly in Firefox!
Could this be an Internet Explorer issue?
I'm running IE11.

Answer 1

There doesn't seem to be a good, cross-browser way to do this. The best solution would be to use the dir attribute or CSS direction attribute to align right-to-left:

<asp:DropDownList ID="DropDownList1" runat="server" CssClass="MyDDL" dir="rtl">

.MyDDL
{
    width:100px;
    direction:rtl;
}

But as you mentioned, this will cause the select's arrow to move to the left. Otherwise, the only alternative I know of would be to set text-align:right as you've already done, but that seems to only work in Firefox (tested in IE8, Firefox 27 amd Chrome 33).