是否可以像这样设置html select下拉列表的样式，并保持其移动友好性？

Question

First, this is what the drop-down should look like:

This should be just a normal html select

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

There's probably some JQuery component library out there that I can use, but what I also want is that when you're on mobile, eg Android, iOS, etc... that the mobile browser will handle the display/ineraction of the select box, rather than having the user interact with the drop-down as it is displayed in the screenshot... In other words, this styling should only apply for desktop.

Answer 1

So you want one element to be displayed on desktop, and a different one displayed on mobile, why not have them both in the markup and display a different one via CSS depending on the size of the screen?

@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;
    }
}

Something like that? note that display:inherit should be whatever display the element is having by default.