9

编辑：屏幕截图见底部：

我只是想知道是否有人遇到过类似的问题。在我的机器、Windows 8 和最新版本的 Chrome 上，我的选择框选项在垂直间距方面看起来都符合我的预期。在我旁边的开发人员中，也使用相同版本的 Chrome 运行 Windows 8，选择框选项似乎有 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 m的 Google Chrome
  • 使用以下 Chrome 扩展程序：
    • URL-alizer（两者）
    • 谷歌环聊（两者）
    • Gmail 的右收件箱（我）
    • Any.do（其他开发人员）
    • 快速笔记（其他开发者）
    • 谷歌文档（两者）

如果有任何我遗漏的细节，请告诉我。

谢谢

使用填充选择：

使用填充选择

选择正常出现：

选择正常出现

4

2 回答 2

2

斯科特，

如果这真的很重要，您可以使用 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. Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to select, scrolling of long lists, opening the menu upwards when select is against bottom of screen, to name a few.

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

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

工作量很大，而且很容易搞砸，所以要小心。

约书亚

于 2013-11-04T18:51:41.597 回答
2

由于它是相同的操作系统和相同的浏览器，我会查看用户样式表：

  • Windows：\User Data\Default\User StyleSheets\custom.css
  • Linux：~/.config/chromium/Default/User StyleSheets/Custom.css
  • （我知道你们都在 Windows 上，只是为读者提供基础）

过去，我会在页面呈现后使用元素检查器检查差异。一个总是妨碍我使用填充等的 CSS 属性是 box-sizing。

于 2013-11-04T19:01:38.890 回答