title: chromium select (dropdown) scrollbar cannot be change/inspect the height/items and look
body: <p>I have a select in my html with 24 options of hours data:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hoursDD {
    height: 34px;
    display: inline-block;
    vertical-align: top;
    width: 140px;
    font-size: 14px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="hoursDD"&gt;&lt;option value="00:00"&gt;00:00&lt;/option&gt;&lt;option value="01:00"&gt;01:00&lt;/option&gt;&lt;option value="02:00"&gt;02:00&lt;/option&gt;&lt;option value="03:00"&gt;03:00&lt;/option&gt;&lt;option value="04:00"&gt;04:00&lt;/option&gt;&lt;option value="05:00"&gt;05:00&lt;/option&gt;&lt;option value="06:00"&gt;06:00&lt;/option&gt;&lt;option value="07:00"&gt;07:00&lt;/option&gt;&lt;option value="08:00"&gt;08:00&lt;/option&gt;&lt;option value="09:00"&gt;09:00&lt;/option&gt;&lt;option value="10:00"&gt;10:00&lt;/option&gt;&lt;option value="11:00"&gt;11:00&lt;/option&gt;&lt;option value="12:00"&gt;12:00&lt;/option&gt;&lt;option value="13:00"&gt;13:00&lt;/option&gt;&lt;option value="14:00"&gt;14:00&lt;/option&gt;&lt;option value="15:00"&gt;15:00&lt;/option&gt;&lt;option value="16:00"&gt;16:00&lt;/option&gt;&lt;option value="17:00"&gt;17:00&lt;/option&gt;&lt;option value="18:00"&gt;18:00&lt;/option&gt;&lt;option value="19:00"&gt;19:00&lt;/option&gt;&lt;option value="20:00"&gt;20:00&lt;/option&gt;&lt;option value="21:00"&gt;21:00&lt;/option&gt;&lt;option value="22:00"&gt;22:00&lt;/option&gt;&lt;option value="23:00"&gt;23:00&lt;/option&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is when I click the dropdown I see only some of the select options and not all of them and I cannot control the height os the scroll and the number of items it shows or it's style (look). 
  I see only the options from 00:00 to 19:00. 
  It shows exactly 20 elements by default even though I have 24 elements. I cannot scroll to the rest of the items or style the select builtin control.</p>
  
  <p>I'm running the HTML under chromium/windows 10.</p>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>#hoursDD {
      height: 34px;
      display: inline-block;
      vertical-align: top;
      width: 140px;
      font-size: 14px;
  }
  </code></pre>
  
  <p>It is like the drop-down scroll has a max-height/height property.</p>
  
  <p>Is this some user-agent CSS issue? or WebKit CSS issue? </p>
  
  <p>(As the image show I can pick only from 01:00 until 19:00 and I don't see the options 20:00 etc...)</p>
  
  <p>The overflow settings are as follows:
  <a href="https://i.stack.imgur.com/y2EDQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2EDQ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1MWXR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1MWXR.png" alt="enter image description here"></a></p>