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

如上图所示，所选文本可以使用填充进行垂直操作（在本例中，我使用

padding top:5px；

，但我的客户拒绝使用top select，因为选择按钮之间存在空格（如果您查看示例1中按钮的上方，可以看到空格）

客户希望它是垂直对齐的，采用与示例2类似的设计（这就省去了可怕的空间），我已经看了很多遍，但是除了执行示例1中演示的操作之外，没有这样的css属性存在，这显然是“不可接受的”

是否存在这样的属性？它是否兼容跨浏览器？

元素由操作系统呈现，而不是HTML。由于这个原因，它们因操作系统而异，并且样式选项有限

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

---

请参阅：

设置下拉选择控件的样式有一个技巧，请参阅本文：

简而言之，您需要做以下几点：

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

不确定这种黑客行为与IE的兼容性如何，但如果使用JavaScript是一种选择，那么还有很多不错的选择

下面是我喜欢的一个例子：

以下内容在Chrome和Firefox中可以很好地工作，尽管IE11的表现有点奇怪（可能还有其他IE版本）

---

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

在不同的浏览器上，这样的输入样式不会相同s、 如果你想要完全控制，你会想要类似或的东西。在这种情况下，你可以尝试使用线高度，但如果你有多行选项，那看起来很难看。