3

对于大多数屏幕尺寸，我有一个位于页面顶部的下拉菜单，但在较小的屏幕上，例如笔记本电脑，菜单位于屏幕中间，因此，下拉列表位于选择器上方. 我想要一个下拉菜单，无论它在页面的哪个位置，它都会持续下降。这是可能吗？

4

4 回答 4

7

下拉菜单由浏览器/操作系统呈现。您无法使用 CSS 或 JavaScript 控制此类行为。

于 2012-06-04T20:20:05.197 回答
2

因为它是留给浏览器渲染的元素，不，这是不可能的（至少就标准而言不是）。

您最好的选择是使用 HTML 替代下拉菜单 - 这可以通过 CSS 和 Javascript 来实现，尽管已经存在多个 javascript/jQuery 库来执行此任务。

于 2012-06-04T20:21:11.353 回答
0

主要问题是IE。似乎如果您有一个选项列表并且您当前选择的选项不是第一个选项，那么下拉菜单可能会变成“Dropup”。要解决此问题，您可以添加一行 javascript 以将所选项目移动到列表顶部。每次做出新选择时，您都需要触发此代码。同样在页面第一次加载之后。通过将所选选项保留在选项列表的顶部，IE 仅呈现下拉菜单。我并不是说这个解决方案很漂亮，但它可以作为最后的手段。（您需要保存代码和脚本并将其加载到 IE 中才能真正看到它的工作）。

$('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
$('select.dropdowntest').on('change', function() {
  $('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="dropdowntest">
  <option value="sv">Option 1</option>
  <option selected="selected" value="en">Option 2</option>
</select>

于 2019-01-14T14:19:08.300 回答
0

您可以在选择中编辑字体大小，这将改变浏览器的行为

select {
   font-size: 15px;
}
于 2021-07-25T19:49:50.873 回答