我有一个使用<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关闭下拉曾经是。我希望它，以便您可以始终看到您所选择的选择eidogg. 1（无论下拉菜单是打开还是关闭），并且当您打开下拉菜单时，选项列表将显示在当前选定选项的下方，而不会使其模糊。
3条答案
按热度按时间mrphzbgm1#
我过去也遇到过类似的问题，我可以告诉你我没有找到任何答案，相信我。如果你在Mac上打开“选择下拉菜单”，选项会出现在输入上方。如果你在Windows PC上用完全相同的代码做完全相同的事情，下拉选项会出现在输入下方。这就是你想要的。我强烈建议你转到另一个问题上，因为你这个简单问题的解决方案比看起来要复杂得多...
ftf50wuq2#
我也有同样的问题，最后称赞这篇文章是现场：
如果您认为自定义下拉菜单绝对是个好主意，那么您应该使用JavaScript来：
https://css-tricks.com/dropdown-default-styling/
我建议不要使用系统默认的“default-seleces”，如果你真的需要一个解决方案，看看现成的插件，比如伟大的tomselect：https://tom-select.js.org/等等。
ohfgkhjo3#
据我所知，
select标记样式不仅取决于浏览器，还取决于操作系统-元素是在操作系统显示设置之后样式化的，所以本质上，您可以对原生元素做的事情不多。我认为
select样式背后的最初想法与可访问性设置有关。