下拉菜单默认样式

不同浏览器处理表单样式的方式一直存在很大差异。这可能永远都会存在——因为 UI 设计选择在规范中没有描述。浏览器制造商可能认为这是他们能够稍微区分用户体验的方式之一。选择（下拉）菜单尤其奇怪。

当我说下拉菜单时，我的意思是

<select>
  <option>Apples</option>
  <option>Oranges</option>
  <option>Banannas</option>
</select>

在 CSS 完全不干预的情况下，这将在浏览器之间一致呈现。在 Mac 上，为 11px Lucida Grande。

自从这篇文章撰写以来，选择样式发生了一些细微变化。2020 年年中，我们仍然没有惊人的样式控制，但您可以 使用此技巧很好地设置外部样式。

如果您更改字体系列会怎样？

select {
  font-family: Cursive;
}

WebKit 浏览器（Safari、Chrome）将忽略您。Firefox、Opera 和 IE 将尊重您的更改。但是，font-family 不会级联到选择中，您必须在其中显式声明它。

如果您更改字体大小会怎样？

select {
  font-size: 32px;
}

这很有趣。在 WebKit 中，如果字体大小在 0 到 10px 之间，它将呈现字体大小为 10px。从 11px 到 15px，它将呈现为 11px，而 16px 或更大则呈现为（等等），14px。此行为类似于 他们处理搜索输入的方式。

Firefox、Opera 和 IE 将尊重您的更改，但同样，只有在选择中显式声明时才会生效，它不会级联。

你能让 WebKit 尊重你的更改吗？

有点。您可以对选择设置 border: 0;，它会使它看起来像下拉菜单的某种糟糕版本，但仍然具有一些 UI。它还将允许您的字体大小和样式选择生效。

您还可以设置 -webkit-appearance: none;，您将获得类似圆角输入框的外观，但仍然具有选择交互（单击以显示菜单、键盘命令等）。它也将以这种方式尊重您的字体选择。

我认为 appearance 是完全自定义下拉菜单的最佳选择，但它将仅限于 WebKit，因为虽然 -moz-appearance: none; 有效，但它不会删除所有 chrome，只删除一些。Opera 完全不支持 appearance。

下拉菜单本身呢？

就像激活时显示选择项的内容一样。据我所知，没有任何浏览器可以对其进行样式设置。甚至粗体或斜体也不行。您可以获得的最接近的样式是使用 对其进行分组。这可能主要是一个 UI 问题，但也可能是安全问题。您不希望人们使用字体进行一些复杂的操作，从而使所选选项不清楚。

如果您想要完全的界面控制权会怎样？

首先，尝试尽一切可能避免这种情况。默认表单元素很熟悉并且效果很好。使下拉菜单与品牌的字体和颜色匹配通常没有必要，充其量是令人讨厌的，最坏的情况是糟糕的 UX。

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

1. 以可访问的方式隐藏原始选择。
2. 使用自定义标记（可能是定义列表）重建选择，并根据需要进行样式设置。
3. 复制默认选择具有的所有功能，包括：向上和向下箭头键以及返回以选择的键盘事件、长列表的滚动、当选择靠近屏幕底部时向上打开菜单，等等。
4. 对于移动设备，触发本机选择菜单的打开，因为该功能几乎不可能复制。例如，iOS 翻转轮。
5. 您可能也希望考虑为桌面使用“点击穿透”样式。默认情况下，选择采用自定义样式，但当您单击它时，它会打开本机下拉菜单（就地）。当您选择一个选项时，它会再次显示自定义样式并显示所选内容。

这是一项非常繁重且容易出错的工作，因此请注意。 本教程 处理了一些这样的难题。 这是一个笔，其中包含本文的一些测试内容。