垂直对齐中间选择的选项的选择框

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）表现了一下。

这将允许您垂直对齐文本，但由于您将选择框设置得更高，因此您将有一个小浮动箭头作为展开箭头，因此如果您需要更改选择元素的默认展开箭头希望使用此解决方案看起来不错。