vertical alignment for FORM INPUT FIELDS in safari and chrome

混江龙づ霸主 提交于 2020-01-25 06:29:44

问题


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!


回答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.



来源:https://stackoverflow.com/questions/3355742/vertical-alignment-for-form-input-fields-in-safari-and-chrome

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!