Bug 40216 - text-align doesn't work on select tags
Summary: text-align doesn't work on select tags
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac (Intel) OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2010-06-06 17:59 PDT by Julien
Modified: 2024-03-06 15:11 PST (History)
14 users (show)

See Also:


Attachments
Test case to see if selects are aligned or not (1.24 KB, text/html)
2010-06-06 18:09 PDT, Julien
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Julien 2010-06-06 17:59:11 PDT
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
Comment 1 Julien 2010-06-06 18:09:28 PDT
Created attachment 57987 [details]
Test case to see if selects are aligned or not
Comment 2 Julien 2010-06-06 18:10:25 PDT
Latest WebKit, Safari and Chrome failed on this but this works on both Firefox and Opera Mac versions.
Comment 3 Alexey Proskuryakov 2010-06-06 22:26:50 PDT
Somewhat surprisingly, I cannot find an exact duplicate for this. There are bug 38780 and bug 19785 though.
Comment 4 Julien 2010-06-07 09:17:07 PDT
Yeah I searched a bit and was surprised too...
Comment 5 Paul 2018-03-05 07:30:18 PST
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?
Comment 6 Nicolas H. 2021-04-27 05:53:02 PDT
Any update? This is really painful to be blocked for such things.
Comment 7 Peter B 2021-10-03 10:14:50 PDT
I believe I found an answer to this. Try CSS code "direction rtl;" on the "select" element. Ditto to driving you crazy.
Comment 8 Peter B 2021-10-03 10:19:26 PDT
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.
Comment 9 Sam Sneddon [:gsnedders] 2022-02-25 10:32:55 PST
<rdar://5847174>
Comment 10 Aditya Keerthi 2024-03-06 15:11:05 PST
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`.