Chrome会添加垂直填充以选择不同计算机上的选项

Question

编辑:屏幕截图见底部:

我只是想知道是否有人遇到过类似的问题.在我的机器,Windows 8和最新版本的Chrome上,我的选择框选项都看起来像我期望的垂直间距.在我旁边的开发人员上,同样运行Windows 8并使用相同版本的Chrome,选择框选项似乎在填充的顶部和底部有5px.代码在我们的开发服务器上,因此我们访问相同的文件.

这是一个jsfiddle在其他开发人员的机器上重现这个问题:http://jsfiddle.net/3etfP/

这是一个测试用例(同样是一个jsfiddle):

<style type="css">
    .select {
        padding: 3px;
        color: #000;
    }
</style>    

<div>
   <select name="testSelect" id="testSelect" class="select">
       <option value="-1">Select One</option>
       <option value="0">No</option>
       <option value="1">Yes</option>
   </select>
</div>

其他一些可能有用的细节:

• 两者都运行Windows 8.0 64位
• 两者都使用桌面模式
• 两者都使用版本30.0.1599.101米的谷歌浏览器
• 使用以下Chrome扩展程序:
  • URL-alizer(两者)
  • Google环聊(两者)
  • 适用于Gmail的收件箱(我)
  • Any.do(其他开发者)
  • 快速笔记(其他开发)
  • Google文档(两者)

如果有任何我错过的细节,请告诉我.

谢谢

选择填充:

选择正常显示:

Answer 1

斯科特，

如果这确实很重要，您可以模仿带有 div 的 select 的行为并获得更好的控制。话虽如此，它可能不是填充，您是否尝试过在元素margin: 0上设置<option>？

.select option {
  padding: 0;
  margin: 0;
} 

大多数元素在不同的浏览器中都有自己的填充/边距。如果您希望在所有浏览器上实现统一的设计，我建议您使用 CSS 重置（请参阅此处）。也可能是你们中的任何一个人都放大了 Chrome。你们俩都应该按住control并按+或-以确保缩放设置为 100%。

编辑： 不幸的是，我认为你已经陷入困境。参见 Chris Coyier 的文章Dropdown Default Styling，尤其是文章的后半部分，这里引用了大部分内容。

下拉菜单本身怎么样？

例如，激活时显示选择的东西。据我所知，没有办法在任何浏览器中设置这些样式。甚至没有粗体或斜体。您可以获得的最接近样式的方法是使用 来对它们进行分组。这可能主要是一个 UI 问题，但也可能是一个安全问题。您不希望人们使用字体做一些棘手的事情，从而不清楚选择了什么选项。

如果您想要完全的设计控制怎么办？

首先，尽一切努力避免这样做。默认表单元素很熟悉并且运行良好。让下拉菜单与你的品牌的字体和颜色相匹配通常是没有必要的，而且往好里说可能会令人讨厌，往坏里说可能会带来糟糕的用户体验。

如果您认为自定义下拉菜单绝对是个好主意，那么您应该使用 JavaScript 来：

1. 轻松隐藏原始选择。

2. 使用自定义标记（可能是定义列表）重建选择，您可以根据需要设置样式。

3. 复制默认选择具有的所有功能，其中包括：键盘事件，例如向上和向下箭头键以及返回选择、滚动长列表、当选择位于屏幕底部时向上打开菜单等等。

4. 对于移动设备，触发打开本机选择菜单，因为该功能几乎无法复制。例如，iOS 翻转轮。

5. 您可能还想考虑桌面的“点击”样式。默认情况下，选择自定义样式，但是当您单击它时，它会打开本机下拉菜单（就位）。当您选择一个选项时，它会再次显示自定义样式并显示该选项。

这是一项繁重的工作，而且很容易搞砸，所以要小心。

约书亚