javascript - 是否可以像这样设置 html 选择下拉菜单的样式并仍然保持移动友好？

Question

首先，下拉菜单应该是这样的:

这应该只是一个普通的 html select

<select>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  ...
</select>

可能有一些我可以使用的 JQuery 组件库，但我还想要的是当你在移动设备上时，例如Android、iOS 等...移动浏览器将处理选择框的显示/操作，而不是让用户与屏幕截图中显示的下拉菜单进行交互...换句话说，这种样式应该只适用于桌面。

Answer 1

所以您希望一个元素显示在桌面上，而另一个元素显示在移动设备上，为什么不将它们都放在标记中并根据屏幕大小通过 CSS 显示不同的元素呢？

@media screen and (max-width: 760px){
    #select-box{
        display:inherit;
    }
    #dropdown-box{
        display:none;
    }
}


@media screen and (min-width: 761px){
    #select-box{
        display:none;
    }
    #dropdown-box{
        display:inherit;
    }
}

类似的东西？请注意，display:inherit 应该是元素默认显示的内容。