Bug 40216 – text-align doesn't work on select tags

• Status: NEW
• Component: Forms

[Julien]

Hi,

If I'm doing something like <select style="text-align: right;"> … options … </select> the text content is still align to the left.
Whatever I'm trying to do, with css rules on select or options it always aligns to the left.
It doesnt work neither on latest Chrome but it does with Firefox…

Julien

[Julien]

Created attachment 57987 [details]
Test case to see if selects are aligned or not

[Julien]

Latest WebKit, Safari and Chrome failed on this but this works on both Firefox and Opera Mac versions.

[Alexey Proskuryakov]

Somewhat surprisingly, I cannot find an exact duplicate for this. There are bug 38780 and bug 19785 though.

[Julien]

Yeah I searched a bit and was surprised too...

[Paul]

Based on mitz's comment in bug 19785 that "We are not going to center or justify menu items on Mac OS X", should this not be closed as WONTFIX?

[Nicolas H.]

Any update? This is really painful to be blocked for such things.

[Peter B]

I believe I found an answer to this. Try CSS code "direction rtl;" on the "select" element. Ditto to driving you crazy.

[Peter B]

Furthermore, if you want the select text to be to the right but then the options to be on the left you can do something like this:

.select:active {
    direction: ltr;
}

This will essentially change the css for the select element for when it is active - i.e. when you are making a selection.

[Sam Sneddon [:gsnedders]]

<rdar://5847174>

[Aditya Keerthi]

We cannot change the text alignment of menu items, but we should honor text-align for the in-page control. This would match the behavior of both Chrome and Firefox.

Would require changes in `RenderMenuList::adjustInnerStyle`.