HTML/CSS list box on mobile

问题

The following simple fiddle shows a list box with the set of country names. On a PC the height property tells the page to render a list box instead of a drop-down, and consequently n items are visible. On mobile (iPad/iPhone), the height property seems to tell the page how high the drop down control should be (it looks ridiculous as you'd expect).

My CSS class looks like this:

.sliderlist {
    width: 240px;
    height: 620px;
    font-size: 12px;
    font-family: "Verdana", Geneva, sans-serif;
}

I would like a list box on the page, PC or mobile, not a drop-down. How can I do this with HTML/CSS?

To clarify what I mean, the following is a photo from my iPad of what the list looks like (it's just a drop down, the height of which is given by the height property):

and on the PC with the same code we have a list box, not a drop-down. I want this latter on mobile too:

回答1:

Here is something that will give you results as you expect jsbin. For some unknown reason safari does not cares about the size parameter of the select option, thus we use jquery to get it done. This is the result I got on Iphone 4.

Also to get appropriate zoom levels you must include the following in the header section of the page the following code.

Try including the following line of code in head section of your page. More info here

<meta name="viewport" content="width=device-width, height=device-height initial-scale=1">

回答2:

You can write separate class for mobile and desktop using media query.

/*for laptop screen */

 @media screen 
      and (min-device-width: 1200px) 
      and (max-device-width: 1600px) 
      and (-webkit-min-device-pixel-ratio: 1) {
        .sliderlist {
          width: 240px;
          height: 300px;
          font-size: 12px;
          font-family: "Verdana", Geneva, sans-serif;
        }
    }

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .sliderlist {
      width: 150px;
      height: 100px;
      font-size: 12px;
      font-family: "Verdana", Geneva, sans-serif;
    }

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
    .sliderlist {
      width: 240px;
      height: 300px;
      font-size: 12px;
      font-family: "Verdana", Geneva, sans-serif;
    }

}

回答3:

Try like this: Demo

.sliderlist {
    width: 240px;   
    height:94vh; /* newly added*/
    font-size: 12px;
    font-family: "Verdana", Geneva, sans-serif;
}

来源：https://stackoverflow.com/questions/30454948/html-css-list-box-on-mobile

标签

javascript

css

html-lists