Select Input (drop down) text align issue

Ive got a select box (drop down), that has a set size, 10 pixels taller + longer an a default one. In firefox + ie the text inside is aligned top right. I want the text to be aligned vertically center. Chrome does this automatically.. if i use padding etc it fixes it in firefox etc but breaks it in chrome... this is an asthetic thing rather than function

Thank you !!!!

 

<jamie>Well there's your problem</jamie>

As I JUST said in another thread:

Attempting to change the alignment of content, formatting, or basically anything more than border and color is pretty much going to /FAIL/ cross browser. Form elements simply do not respond to padding, margin, height or width the same way across browsers with EVERY SINGLE ONE OF THEM having a different behavior. Get used to it.

Though silly question, you want the text content of the element centered in the select, is there some reason you aren't using text-align?

 

Text align doesnt seem to work

 

if you set it on BOTH select and option, it will work in FF and Opera, in Chrome it will center the 'selected' part but will ignore it in the drop-down, while for IE and Safari it does absolutely nothing.

As I said, what you are trying to do cannot be done cross-browser using HTML/CSS because the HTML/CSS specification doesn't actually SAY how CSS or styling is supposed to be applied to form elements.

Royal PITA. I've seen people resort to using a javascript 'replacing' code to fake the appearance of a select to pull it off - which might be the only real way to do it; just be sure if you go that route you include the select as a scripting-off fallback.