Height of an HTML Select Box (Dropdown)

How to set max-height of dropdown selection area?

Specifying height:50px is limiting the select to 50px. Use min-height instead. Also wrap the select element in a div with fixed height so that it'll overlap on content below and not push it down.

.select-wrapper {
  height: 50px;
  overflow-y: visible;
}

.select {
  width: 100%;
  /* make it min-height*/
  min-height: 50px;
  border-radius: 25px;
  border-color: #555;
  padding: 10px;
}

<span>Select height is limited to 8 options.</span>
<div class="select-wrapper form-column form-column-field">
  <select data-no-search="" data-placeholder="Выбрать год" onfocus="this.size=8;" onblur="this.size=1;" onchange="this.size=1; this.blur();" class="select select-no-search">
    <option disabled="disabled">
      <font style="vertical-align: inherit;">-Select Year</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1922</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1923</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1924</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1925</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1926</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1927</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1928</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1929</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1930</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1931</font>
    </option>
    <option value="1922">
      <font style="vertical-align: inherit;">1932</font>
    </option>
    <option value="1923">
      <font style="vertical-align: inherit;">1933</font>
    </option>
  </select>
</div>
<div class="footer__block" style="background-color:wheat;height:200px;border:2px dashed green">
  <h3>Popular tags:</h3>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos dolorem earum magnam sit minima incidunt nemo sed voluptates similique quia.
</div>

Height of an HTML select box (dropdown)

Confirmed.

The part that drops down is set to either:

The height needed to show all entries, or
The height needed to show x entries (with scrollbars to see remaining), where x is
- 20 in Firefox & Chrome
- 30 in IE 6, 7, 8
- 16 for Opera 10
- 14 for Opera 11
- 22 for Safari 4
- 18 for Safari 5
- 11 in IE 5.0, 5.5
In IE/Edge, if there are no options, a stupidly high list of 11 blanks entries.

For (3) above you can see the results in this JSFiddle

How to Set Height for the Drop Down of Select box

Try adding this to the <select> element:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

like:

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

SAMPLE DEMO

How to adjust Select drop-down height

You cannot because the select box is a system control..

See Height of an HTML select box (dropdown)

You could use a dropdown replacement widget/module..

Height of the select option box

You can use this to increase height:

.select2 select{
  height: 50px;
background: transparent;
}

Add more properties here to style the box.
Also correct way to use before and after is :

.select2::after {
....
}

Codepen