如何改變 select 元素的高度

mozilla 對於美化 select 元素的樣式有這樣一段描述（用 CSS 美化 Select 元素）：

衆所周知，select 元素很難用 CSS 進行高效的設計。你能夠影響任何元素的某些方面 - 例如，操縱框模型，顯示的字體等，你能夠使用 appearance 屬性來刪除默認的系統外觀。
可是，這些屬性不會在瀏覽器之間產生一致的結果，而且很難在列中將不一樣類型的表單元素相互排列。 select 元素的內部結構複雜，難以控制。 若是你想得到徹底控制，你應該考慮使用一個具備良好設施的庫來構建窗體小部件（例如jQuery UI），或者嘗試使用非語義元素，JavaScript 和 WAI-ARIA 滾動本身的下拉菜單來提供語義。

Firefox 瀏覽器 select 原樣式以下，當 option 超出 20 個元素時，展現 20 個元素，產生豎向滾動條：

不過 select 元素提供了 size 屬性，來控制控件中顯示的行數 —— option 元素的個數

size屬性

若是控件顯示爲滾動列表框，則此屬性表示爲控件中同時可見的行數。瀏覽器不須要將選擇元素呈現爲滾動列表框。默認值爲0

1. 方法一：用 size 屬性來設置 option 元素顯示的個數

• 當 option 的個數超出 5 個時，設置 select 的 size 爲 6；
• 當失去焦點時，設置 select 的 size 爲默認值 0；
• 當改變選擇後，設置 select 的 size 爲默認值 0。

改變後的樣式以下：

使用 size 屬性改變 select 元素的高度 codepen 在線示例

1. 方法二： 使用其餘元素替代 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>