mozilla 對於美化 select 元素的樣式有這樣一段描述（用 CSS 美化 Select 元素）：
眾所周知，select 元素很難用 CSS 進行高效的設計。你可以影響任何元素的某些方面 - 例如，操縱框模型，顯示的字體等，你可以使用 appearance 屬性來刪除默認的系統外觀。
但是，這些屬性不會在瀏覽器之間產生一致的結果，並且很難在列中將不同類型的表單元素相互排列。 select 元素的內部結構復雜，難以控制。 如果你想獲得完全控制，你應該考慮使用一個具有良好設施的庫來構建窗體小部件（例如jQuery UI），或者嘗試使用非語義元素，JavaScript 和 WAI-ARIA 滾動自己的下拉菜單來提供語義。
Firefox 瀏覽器 select 原樣式如下，當 option 超出 20 個元素時，展示 20 個元素，產生豎向滾動條：
不過 select 元素提供了 size 屬性，來控制控件中顯示的行數 —— option 元素的個數
size屬性
如果控件顯示為滾動列表框，則此屬性表示為控件中同時可見的行數。瀏覽器不需要將選擇元素呈現為滾動列表框。默認值為0
-
方法一：用 size 屬性來設置 option 元素顯示的個數
- 當 option 的個數超出 5 個時，設置 select 的 size 為 6；
- 當失去焦點時，設置 select 的 size 為默認值 0；
- 當改變選擇后，設置 select 的 size 為默認值 0。
改變后的樣式如下：
使用 size 屬性改變 select 元素的高度 codepen 在線示例
-
方法二： 使用其他元素替代 select 元素，模擬 select 選擇
- 增加 input 元素提供選擇域，以及顯示選擇的值；
- 用 ul li 替代 select option 選擇；
- 當選擇了某一 li，或者點擊了空白區域，ul 隱藏；
- 當點擊了 input 后，ul 顯示或隱藏。
改變后的樣式如下：
使用其他元素替代 select 元素，模擬 select 選擇 codepen 在線示例(js 中需引入 jquery 庫，效果才會生效)
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>