Question

我有这个下拉列表，但问题是当我在IE中运行它时，如果我从底部或中间选择某些东西，它会上下移动。如何修复它以便它总是在下面展开： https://jsfiddle.net/tq1bhfno/（你需要在IE中运行它）

<div class="col-lg-2 col-md-2">

    <div class="select-wrapper">
        <select name="gametype" id="gametype" ng-model="selectGameType">
          <option>TEST1</option>
          <option>TEST2</option>
          <option>TEST3</option> 
          <option>TEST4</option>
          <option>TEST5</option>
          <option>TEST6</option>
          <option>TEST7</option>


        </select>
    </div>
</div>

Answer 1

下拉菜单由Browser / OS呈现。您无法使用CSS或JavaScript控制此类行为。

下拉菜单本身怎么样？

就像在激活时显示选择的东西一样。据我所知，没有办法在任何浏览器中设置这些样式。甚至不是粗体或斜体。你可以得到最接近风格的东西就是使用它来分组它们。这可能主要是一个UI的东西，但它也可能是一个安全的东西。你不希望人们用字体做棘手的事情，这使得不清楚选择了什么选项。

Read More About Dropdown Default Styling

查看没有任何CSS的行为：

https://jsfiddle.net/tq1bhfno/2/

只有HTML：

<div class="col-lg-2 col-md-2">

<div class="select-wrapper">
    <select name="gametype" id="gametype" ng-model="selectGameType">
      <option>TEST1</option>
      <option>TEST2</option>
      <option>TEST3</option> 
      <option>TEST4</option>
      <option>TEST5</option>
      <option>TEST6</option>
      <option>TEST7</option>
    </select>
</div>

它是一样的。

Answer 2

bottom: 100%;

将此属性添加到您的css以获取下拉列表。这会强制显示下面的所有内容。

如何在IE中为下拉列表修复样式？

2 个答案:

下拉菜单本身怎么样？