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

Question

我有一个CSS下拉菜单，其中包含一个超出菜单范围的选择框 打开时的下边框。随后单击超出选择选项 菜单的下边框使菜单关闭（即“：悬停”不再适用 一旦选择结束）。

有解决方法吗？如果我可以强制选择“放弃”，那就太好了， 但我没有办法强制这种情况发生。

有什么想法吗？

Answer 1

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

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

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

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

Bootplus只是一个有下拉的插件的一个例子。提取该组件from the code非常容易。

Chosen是另一个很好的插件，我很确定可以让你将下拉列表的大小限制为另一种选择。

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

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