Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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!
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.