垂直對齊中間選擇的選項的選擇框

Question

作爲上述圖像顯示，所選擇的文本可以垂直使用填充（在這個例子中我使用padding-top: 5px;但我的客戶拒絕頂部選擇被操縱由於之間的空白間隙選擇按鈕（如果你看上面的例子1上的按鈕，你可以看到空間）

客戶端希望它是垂直對齊，在類似的設計示例二（它壟斷了可怕的空間） ve看起來很寬，但沒有這樣的css屬性存在，除了做例子1中展示的東西，並且顯然不是「可接受的」。

這樣的屬性是否存在？它跨瀏覽器兼容嗎？

Answer 1

<select>元素由操作系統呈現，而不是HTML。由於這個原因，它們從操作系統到操作系統各不相同，並且具有有限的樣式。

如果您想要高級樣式需要探索基於Javascript的替代方案。

參見：http://getbootstrap.com/components/#dropdowns

Answer 2

有一招樣式下拉菜單選擇控制，看看這篇文章：http://bavotasan.com/2011/style-select-box-using-only-css/

這裏就是你需要簡而言之做什麼：

• 包裝選擇在容器格
• 使選擇比容器更寬
• 使sele ct背景透明
• 設置溢出：隱藏到容器
• 將自定義背景箭頭圖像添加到容器。

不知道IE如何兼容這種黑客行爲，但如果使用JavaScript是一個選項，那裏有一個很好的選擇。

這裏有一個我喜歡的：http://harvesthq.github.io/chosen/

Answer 3

繼Change color and appearance of drop down arrow將在Chrome和Firefox瀏覽器工作得很好，雖然IE11是奇怪（可能還有其他版本的IE）表現了一下。

這將允許您垂直對齊文本，但由於您將選擇框設置得更高，因此您將有一個小浮動箭頭作爲展開箭頭，因此如果您需要更改選擇元素的默認展開箭頭希望使用此解決方案看起來不錯。