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

Question

我使用有一个HTML/CSS下拉<select>和<option>元件(未<ul>,<li>).我想设置下拉选项的样式,以便当您单击打开下拉列表时,选项列表将显示在下拉列表标题下方(您在单击以打开它之前看到的位),而不是在该标题之上或模糊该标题.

我知道使用<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(下拉列表是打开还是关闭),当您打开下拉列表时,您的选项列表会显示在当前所选选项下方而不会遮挡它.

Answer 1

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