防止选择从css下拉菜单的底部运行

Question

我有一个 CSS 下拉菜单，其中包含一个超出菜单范围的选择框 打开时的底部边框。随后单击超出范围的选择选项 菜单的底部边框导致菜单关闭（即，":hover" 不再适用 一旦选择关闭）。

有没有办法解决这个问题？如果我可以强制选择“下拉”，那就太好了， 但我还没有找到强制这种情况发生的方法。

有什么想法吗？

Answer 1

一种解决方案是限制选择的高度，使其不会突出，或使其始终处于下拉状态。这个答案稍微讨论了这些选项。

选择不是典型的 HTML 元素。我们是pretty restricted in styling them，即使the shadow DOM is more widely accessible（我一直想测试！），我也不完全确定我们会有多少控制权。我不确定的原因是，某些浏览器，如 Safari 和 Chrome，似乎使用 OS API 进行选择，而其他浏览器，如 Firefox，显然使用 Shadow DOM。

综上所述，我认为最简单的解决方案是使用 Javascript 选择插件来完全解决修改选择本身的问题。

使用 Javascript 的想法非常简单。您将隐藏实际的选择并插入新的 DOM 元素（如divs）来替换它。这些 div 可以设置为看起来像一个选择，并编程为您希望选择的行为。并且对该外观的任何更改都将应用于真实的隐藏选择，以便可以像往常一样提交和操作表单。

Bootplus 只是具有下拉菜单的插件的一个示例。拉取该组件from the code 相当容易。

Chosen 是另一个不错的插件，我很确定它可以让您限制下拉菜单的大小作为另一种选择。

或者您可以运行一些 Google 搜索并找到更多信息！

简而言之：目前跨浏览器控制select 的显示和行为方式的最佳选择是使用Javascript 插件。