如何在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才可以设置)