vertical alignment for FORM INPUT FIELDS in safari

Question

i have a select box with height: 60px. when i user clicks an option, i would want that option text to appear on the lower bottom of the select box...however safari and chrome automatically vertically aligns the text in the middle.

I have tried increasing line-height, padding-top, margin-top...but these do NOT work for safari/chrome.

please help, if this type of styling in "impossible" for safari/chrome. please let me know as well. Thanks in advance!

Answer 1

Unfortunately you can't style select elements generated by Safari and Chrome. What you're dealing with has been coined Shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Essentially the browser creates elements that all of the select box to function as the page is being rendered, but these elements can't be styled by CSS.

I would recommend using a tool like Chosen: http://harvesthq.github.com/chosen/ if you're looking to do some heavy styling of select boxes. It uses javascript to place elements on top of the select box, replacing its functionality and allowing you to style it with CSS.