safari和chrome中的表單輸入域的垂直對齊方式

Question

我有一個高度爲60px的選擇框。當我用戶點擊一個選項時，我會希望該選項文本出現在選擇框的底部......但Safari和Chrome會自動垂直對齊中間的文本。

我曾嘗試增加行高，填充頂部，頁邊距......但這些不適用於safari/chrome。

請幫助，如果這種類型的造型在safari/chrome的「不可能」。請讓我知道。提前致謝！

Answer 1

不幸的是，您不能設計由Safari和Chrome生成的選擇元素。你正在處理的是Shadow DOM：http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

本質上，瀏覽器創建所有的選擇框作爲頁面正在呈現的元素，但這些元素不能被CSS樣式化。

如果您正在尋找一些沉重的選擇框，我會推薦使用像Chosen這樣的工具：http://harvesthq.github.com/chosen/。它使用javascript將元素放置在選擇框的頂部，替換其功能並允許您使用CSS進行設計。