如何在Safari中設置select高度

在 Safari 中若是想對 <select> 標籤設置高度，最經常使用的方法是設置  -webkit-appearance ，即：

• -webkit-appearance: menulist-button;  或
• -webkit-appearance: none;  

從表象上看這是 Safari 的一個 BUG，我就是想簡簡單單的修改 <select> 高度而已，爲何要還設置 appearance？WTF......可是，再深刻想想（爲這個BUG找個理由🤔），會不會是專門這樣設計的呢？控件主要由行爲和UI兩部分組成。控件的行爲主要由 JavaScript 來實現，而UI，也就是外觀則是由主題 API 來進行繪製呈現(當前 mac 上的主題是 Aqua)。而在 CSS 中， -webkit-appearance 就是用於控制控件外觀的，如今咱們要修改 <select> 的高度，其實就是想修改它的外觀，也就意味着咱們不須要 <select> 的默認外觀，因此設置 -webkit-appearance:none; 好像也沒啥不對誒。

想要刪除 <select> 上的Aqua樣式，設置 -webkit-appearance 是其中經常使用的一種方式，同時 Safari 還提供了另外兩種刪除樣式的方法：

• 指定元素的邊框 border 
• 指定元素的背景 background 

經過上面任意一種方式去除 <select> 的 Aqua 樣式後，咱們就能夠經過屬性修改：

• font-family
• font-size 
• height和line-height
• padding(只有修改-webkit-appearance才能夠設置)