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

Question

如上图所示，可以使用填充垂直操作所选文本（在本例中我使用padding-top: 5px;，但由于选择按钮之间的空白间隙，我的客户拒绝顶部选择（如果你看上面的话）例1中的按钮，你可以看到空格）

客户希望它垂直对齐，在类似于两个示例的设计中（抛弃可怕的空间），我看起来很宽，但除了执行示例1中演示的内容之外，不存在这样的css属性这显然不是“可接受的”。

这样的财产是否存在？它是否跨浏览器兼容？

Answer 1

<select>元素由操作系统呈现，而不是HTML。它们因操作系统而异，因此造型选择有限。

如果您希望高级样式需要探索基于Javascript的替代方案。

请参阅：http://getbootstrap.com/components/#dropdowns

Answer 2

设置下拉选择控件的方法有一个技巧，请查看这篇文章：http://bavotasan.com/2011/style-select-box-using-only-css/

以下是您需要做的事情：

• 将select包装在容器div中
• 使选择宽于容器
• 使选择背景透明
• 设置溢出：隐藏到容器
• 将自定义背景箭头图像添加到容器中。

不确定IE兼容这个hack是什么，但如果使用JavaScript是一个选项，那里有很多很棒的选择。

这是我喜欢的：http://harvesthq.github.io/chosen/

Answer 3

以下Change color and appearance of drop down arrow在Chrome和Firefox中运行良好，尽管IE11表现得有点奇怪（可能还有其他IE版本）。

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