title: html select dropdown on mobile device
body: <p>I have problem with select html element.
  when i change my chrome mode to the device mode like apple ipad or anything else select element getting corrupted. some black space surround the dropdown.
  Here is the source code and the screenshot.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;select&gt;
      &lt;option&gt;test one&lt;/option&gt;
      &lt;option&gt;test two&lt;/option&gt;
      &lt;option&gt;test three&lt;/option&gt;
      &lt;option&gt;test gour&lt;/option&gt;
    &lt;/select&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  
  /* HTML5 display-role reset for older browsers */
  
  article,
  aside,
  details,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol,
  ul {
      list-style: none;
  }
  blockquote,
  q {
      quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/15Ztw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15Ztw.png" alt="enter image description here"></a></p>
  
  <pre><code>/* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;select&gt;
  &lt;option&gt;test one&lt;/option&gt;
  &lt;option&gt;test two&lt;/option&gt;
  &lt;option&gt;test three&lt;/option&gt;
  &lt;option&gt;test gour&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/15Ztw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15Ztw.png" alt="enter image description here"></a></p>