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

Question

我有一个 CSS 下拉菜单，其中包含一个选择框，该选择框在打开时会超出菜单的底部边框。随后单击位于菜单底部边框之外的选择选项会导致菜单关闭（即，一旦选择关闭，“:hover”将不再适用）。

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

有任何想法吗？

Answer 1

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

选择不是典型的 HTML 元素。我们在样式方面受到了很大限制，而且我不完全确定即使影子 DOM 可以更广泛地访问（我一直想测试！），我们将拥有多少控制权。我不确定的原因是，某些浏览器，如 Safari 和 Chrome，似乎使用 OS API 进行选择，而其他浏览器，如 Firefox，显然使用 Shadow DOM。

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

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

Bootplus只是具有下拉菜单的插件的一个示例。从代码中提取该组件相当容易。

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

或者你可以运行一些谷歌搜索并找到更多！

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