Center text in select and option?

Center text in select and option? I googled, so I know each browser handles text-align differently in the select. But, I thought I’d try here to see if you all can think of something I haven’t.

I have no access to the HTML, and I can’t JS it (it’s in an iframe that’s not mine). So I can’t non breaking space it. I believe I tried padding and that didn’t work either. The select has a fixed width, and I just want to center the text inside it (cross browser). Any ideas? Thanks!

If the form is imported into an iframe, it has its own stylesheet, like the html, or scripting, not available to you. Why don’t you code the form yourself in your own document?



Hi, as I’m sure you already know by testing IE is the only browser that won’t center the selects elements, with select{text-align:center;} , and that’s because the elements are (I believe this is the cuase) Window elements that are controlled by the browser/OS. Trying to style them otherwise is a frutile attempt.

The style sheet is available to me.

Oh, you give up to easy. I can add CSS to the forms select till my hearts content. It’s only the HTML I can’t touch. It’s a third party application. Otherwise, if I could, I obviously would just make my own.

Edit: and Safari won’t either…

Can you give us a look-see? Linky? As I recall, this isn’t the first time you’ve gnawed at this. Let’s see the problem up close and personal, so we can fix it.



Lol and out of my arsenal of browsers, safari was the only one I checked…

Anyway I know that JS can modify this behavior, there are scripts out on google I found.

[edit]Yes I believe I’m right on this-nothing I do moves it (besides HTML modding)

I mean safari was the only one I didn’t check[/edit]

Ryan has already given a full answer to the question (even though he didn’t give a full list of the browsers where it can’t be done) - text-align:center works for all those browsers where you can align the content and nothing at all works for the rest.

Yes, but the issue before was :focus (I found a work around). Its just a simple select with two options. I can CSS it anyway I like (I have the JS that calls my external style sheet for the iframe). That works just fine!

Yeah, Ryan, I also found some mention of JS doing this, but never followed that lead, because I can only CSS the iframe, no JS.

As I mentioned, I know there is “supposidly” no fix for IE/safari and maybe some others. Like I mentioned, I just thought I’d throw it out there. As it seems of late, there’s not much this group of CSS gurus can’t accomplish. Things that were thought impossible a few short years ago.

Well in those cases we weren’t dealing with OS/brwoser objects :), though I see your point.