title: HTML/CSS list box on mobile
body: <p>The following <a href="https://jsfiddle.net/RobinsonUK/e6nw2dom/" rel="nofollow noreferrer">simple fiddle shows a list box with the set of country names</a>.  On a PC the height property tells the page to render a list box instead of a drop-down, and consequently <em>n</em> 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).  </p>
  
  <p>My CSS class looks like this:</p>
  
  <pre><code>.sliderlist {
      width: 240px;
      height: 620px;
      font-size: 12px;
      font-family: "Verdana", Geneva, sans-serif;
  }
  </code></pre>
  
  <p>I would like a list box on the page, PC or mobile, not a drop-down.  How can I do this with HTML/CSS?</p>
  
  <p>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):</p>
  
  <p><img src="https://i.stack.imgur.com/wtlOq.png" alt="enter image description here"></p>
  
  <p>and on the PC with the same code we have a list box, not a drop-down.  I want this latter on mobile too:</p>
  
  <p><img src="https://i.stack.imgur.com/U1QOx.png" alt="enter image description here"></p>