阻止选择从css下拉菜单底部运行 [英] Prevent select from running off bottom of css dropdown menu

问题描述

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

有没有办法解决这个问题？如果我可以强制选择drop up，
，但我还没有找到强制执行此操作的方法，那就太好了。

任何想法？解决方案一个解决方案将涉及限制选择的高度，以便它不突出或制作它总是失败。这个答案稍微讨论了这些选项。

选择不是典型的HTML元素。我们在设计风格方面受到了很大的限制，我不完全确定它有多少我们甚至可以在影子DOM更易于使用（我一直想要测试！）。我的不确定性的原因是，似乎一些浏览器，如Safari和Chrome，似乎使用OS API进行选择，而其他浏览器（如Firefox）则明显使用Shadow DOM。

所有这些都说明了，我认为最简单的解决方案是使用Javascript选择插件来彻底解决修改选择本身的问题。

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

Bootplus 只是一个插件的一个例子，它有一个下拉菜单。从代码将代码从代码 a>。

选择是另一个好东西插件，我敢肯定，你可以限制下拉的大小作为另一种选择。

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

$ b

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

I've a CSS dropdown menu containing a select box that extends beyond the menu's bottom border when opened. Subsequent clicking on a select option that lies beyond the menu's bottom border causes the menu to close (i.e., ":hover" no longer applies once the select closes).

Is there a way around this? It'd be great if I could force the select to "drop up", but I've not found a way to force this to happen.

Any ideas?

解决方案

One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.

Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.

With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.

The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.

Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.

Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.

Or you could run some Google searches and find more!

In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.

这篇关于阻止选择从css下拉菜单底部运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！