如何在Safari中设置select高度

Posted 2020-09-22 诚❤️茹羿

在Safari浏览器中如果想对select控件进行高度设置，最常用的方法是下面几个：

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

从行为上看这是Safari的一个bug，但是如果从设计思想出发的话，这个也许并不算是bug。控件是由引擎来实现行为和逻辑，再由主题API来进行绘制完成(mac上的主题是Aqua)。外观样式通过-webkit-appearance进行控制，如果不需要默认的外观，只需要将-webkit-appearance设置为none，然后就可以在上面为所欲为了??。

想要删除select元素上的Aqua样式，设置-webkit-appearance只是其中的一种，另外两种分别是：

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

通过上面任意一种方式去除select元素的Aqua样式后，我们就可以通过属性修改：

• font-family
• font-size 
• height和line-height
• padding(只有修改-webkit-appearance才可以设置)