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

Question

我有一个使用和元素（不是

，
• ）的html / css下拉列表。我想为下拉选项设置样式，以便当您单击以打开下拉列表时，选项列表显示在下拉标题的下方（单击打开前所看到的位），而不位于该标题的上方或模糊不清。 我知道仅使用html / css的

和来样式化下拉列表是有局限性的，但是我想知道是否有可能在不必遵循自定义下拉列表路由的情况下实现此功能。 我认为这可能因浏览器而异，但是我在Mac上的Chrome上遇到问题。    1    2    3 当前，当关闭下拉菜单时，您会看到“ 1”，而当您打开下拉菜单时，您将不再看到所选的数字1，您只能看到新的选项1,2,3列表，该列表直接位于1的顶部用于过去的关闭下拉菜单。我想要这样，以便您始终可以看到自己选择的选项，例如1（无论下拉菜单是打开还是关闭），并且当您打开下拉菜单时，选项列表将显示在当前所选选项的下方，不会使其模糊。

Answer 1

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