title: How to set max-height of dropdown selection area?
body: <p>In vuejs2 app having select input with rather big options list it breaks design of my page on
  extra small devices. Searching in net I found “size” property, but that not what I
  I need : I want to have dropdown selection, which is the default.
  Are there some other decision, maybe with CSS to set max-height of dropdown selection area.</p>
  <p><strong>Modeified PART # 1:</strong>
  I made testing demo page at <a href="http://photographers.my-demo-apps.tk/sel_test" rel="nofollow noreferrer">http://photographers.my-demo-apps.tk/sel_test</a>
  it has 2 select inputs with custom design and events as in this example link
  <a href="https://stackoverflow.com/questions/23534440/how-to-set-height-for-the-drop-down-of-select-box/23534569#23534569">How to Set Height for the Drop Down of Select box</a>
  and following workaround at <a href="https://jsfiddle.net/kEnC9/" rel="nofollow noreferrer">js fiddle</a>:</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>select{
      color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'&gt;
    &lt;option&gt;1&lt;/option&gt;
    &lt;option&gt;2&lt;/option&gt;
    &lt;option&gt;3&lt;/option&gt;
    &lt;option&gt;4&lt;/option&gt;
    &lt;option&gt;5&lt;/option&gt;
    &lt;option&gt;6&lt;/option&gt;
    &lt;option&gt;7&lt;/option&gt;
    &lt;option&gt;8&lt;/option&gt;
    &lt;option&gt;9&lt;/option&gt;
    &lt;option&gt;10&lt;/option&gt;
    &lt;option&gt;11&lt;/option&gt;
    &lt;option&gt;12&lt;/option&gt;
    &lt;option&gt;13&lt;/option&gt;
    &lt;option&gt;14&lt;/option&gt;
    &lt;option&gt;15&lt;/option&gt;
    &lt;option&gt;16&lt;/option&gt;
    &lt;option&gt;17&lt;/option&gt;
    &lt;option&gt;18&lt;/option&gt;
    &lt;option&gt;19&lt;/option&gt;
    &lt;option&gt;20&lt;/option&gt;
    &lt;option&gt;21&lt;/option&gt;
  &lt;/select&gt;
  &lt;div&gt;Popular Tags:&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>are applied to the second select input and it does not look/work properly.
  I suppose it conflicts somehow with current desing.
  Can it be fixed somehow?</p>
  <p>as that is vuejs2 page I know that there are some select components at
  <a href="https://github.com/vuejs/awesome-vue#select" rel="nofollow noreferrer">https://github.com/vuejs/awesome-vue#select</a>
  and I used some of them, like vue-select but I need to keep custom design so I try to use original select input...</p>
  <p><strong>Modified PART # 2 :</strong>
  I added 2 classes definitions :</p>
  <pre><code>.select-wrapper {
      height: 50px !important;
      overflow-y: visible !important;
      background-color: yellow !important;
  }
  
  .select {
      width: 100% !important;
      /* make it min-height*/
      min-height: 50px !important;
      border-radius: 25px !important;
      border-color: #555 !important;
      padding: 10px  !important;
      border:2px dotted red !important;
  }
  </code></pre>
  <p>Also I set background-color and border to these classes to be sure that these classes
  are applied and !important to all properties.
  But it did not help. Could you please to take a look!</p>
  <p>Thank you!</p>