如何仅使用 html 和 css 使 <options> 显示在 <select> 下拉标题下方

Posted 2023-03-05

【中文标题】如何仅使用 html 和 css 使 <options> 显示在 <select> 下拉标题下方

【英文标题】：How to make <options> display below <select> dropdown title using just html and css

【发布时间】：2019-06-25 02:22:04

【问题描述】：

我有一个使用<select> 和<option> 元素（不是<ul>、<li>）的html/css 下拉菜单。我想设置下拉选项的样式，以便当您单击打开下拉列表时，选项列表显示在下拉列表标题下方（您在单击打开它之前看到的位），而不是在该标题之上或隐藏该标题。

我知道使用 <select> 和 <options> 仅使用 html/css 来设置样式下拉列表存在一些限制，但我想知道是否可以在不使用自定义下拉路径的情况下实现这一点。

我相信这可能因浏览器而异，但我在 Mac 上的 Chrome 上遇到了问题。

<select name="numbers"> 
  <option value="1">1</option> 
  <option value="2">2</option>
  <option value="3">3</option>
</select>

目前，当下拉菜单关闭时，您会看到“1”，当您打开它时，您将无法再看到选定的数字 1，您只能看到直接位于顶部的选项 1、2、3 的新列表1 曾经是关闭下拉菜单的位置。我想要它，以便您始终可以看到您选择的选择，例如1（无论下拉菜单是打开还是关闭），当您打开下拉菜单时，您的选项列表会显示在当前选择的选项下方，不会遮挡它。

【问题讨论】：

嗯......对我来说（Firefox，Linux）它就是这样做的。在选择下方打开，而不是覆盖它。

【参考方案1】：

我过去也遇到过类似的问题，我可以告诉你我没有找到任何答案，相信我。如果您在 Mac 上打开“选择下拉菜单”，选项会出现在输入上方。如果您在 Windows pc 上使用完全相同的代码执行完全相同的操作，下拉选项会出现在输入下方，这就是您想要的。 我强烈建议您继续解决另一个问题，因为您的简单问题的解决方案比看起来要复杂得多......