为什么在OSX中的select选项上使用`-webkit-appearance：none`会使文本消失？

为了在OS X中的Chrome上获得我想要的样式，我必须使用-webkit-appearance: none; 属性。

看到这个问题和这个答案 。

问题是，现在当我选择答案时，它没有出现。 该领域仍然是空白。

这是没有该属性的外观：

这是它与属性的外观：

对于它的价值，这就是我如何创建这个选择菜单 – 使用简单forms：

这是它生成的HTML：

  United States 

我该如何解决？

编辑1

这是CSS ：

 form.simple_form select { padding: 20px; -webkit-appearance: none; } 

Answer 1

我有这个问题，结果是导致它的高度属性。

 select { padding: 20px; height: 20px; /* suddenly invisible text! */ -webkit-appearance: none; } 

看看这个小提琴http://jsfiddle.net/bpYGv/2/

Answer 2

在Chrome for OSX（10.8.2）中测试，这很好用：

         
  test United States  
   

你有一个空选项作为第一个。 这就是你得到空白选择的原因。

Answer 3

如果我开始一个新的HTML页面（在Mac Chrome和Safari上），则该问题无法重现。 对我来说，这听起来像一个冲突的CSS规则问题。 是color: #fff; 在select使用的一个类中定义的样式？ 您可能需要尝试检查Chrome / Safari中的select或option元素，以查看是否有任何类应用该样式。

Answer 4

填充正在将选择的内容推出视图，尝试减少Chrome的Web检查器中的填充以使其再次显示。

解决方案可能是硬设置填充和高度，即。

 -webkit-appearance: none; -moz-appearance: none; border: 1px solid #aaa; padding: 20px; font: 12px/12px Arial; height: 57px; 

但是字母的底部像素仍然倾向于在不同的浏览器中掉落，53px高度应该足够（2 *边框+ 2 *填充+ 1 *线高），但Chrome 34需要55px，IE11 56px和FF28 57px才能完全显示字母。

在http://jsfiddle.net/lmeurs/tLkAR/上看到我的小提琴。

另请参阅Formalize以“教你的forms一些礼仪”和选择 “风格选择元素”。

Answer 5

另一个解决方案可能是为选择框设置行高：

 select { line-height: 20px; -webkit-appearance: none; -moz- }