CSS 为什么在 OSX 中的选择选项上使用 `-webkit-appearance: none` 会使文本消失？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16631801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does using `-webkit-appearance: none` on a select option in OSX make the text disappear?
提问by marcamillion
In order to get the styling I want on Chrome in OS X, I have to use the -webkit-appearance: none;attribute.
为了在 OS X 中的 Chrome 上获得我想要的样式，我必须使用该-webkit-appearance: none;属性。
See this questionand this answer.
The issue is, now when I select an answer, it doesn't show up. The field just remains blank.
问题是，现在当我选择一个答案时，它没有出现。该字段只是保持空白。
This is how it looks without that attribute:
这是没有该属性的样子：
This is how it looks WITH the attribute:
这是它与属性的外观：
For what it's worth, this is how I am creating this select menu - with Simple Form:
就其价值而言，这就是我创建此选择菜单的方式 - 使用简单表单：
<%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %>
This is the HTML it generates:
这是它生成的 HTML：
<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]"><option value=""></option>
<option value="231" selected="selected">United States</option></select>
How do I fix this?
我该如何解决？
Edit 1
编辑 1
This is the CSS:
这是CSS：
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
回答by Jonathan Azulay
I had this problem and it turned out to be the height property causing it.
我遇到了这个问题，结果是 height 属性导致了它。
select {
padding: 20px;
height: 20px; /* suddenly invisible text! */
-webkit-appearance: none;
}
Check out this fiddle http://jsfiddle.net/bpYGv/2/
看看这个小提琴 http://jsfiddle.net/bpYGv/2/
回答by Kerim Incedayi
Test in Chrome for OSX (10.8.2) and this works fine:
在 Chrome for OSX (10.8.2) 中进行测试，效果很好：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Testing Select</title>
<style>
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form class="simple_form">
<select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]">
<option value="">test</option>
<option value="231" selected="selected">United States</option>
</select>
</form>
</body>
</html>
You have an empty option as the first one. That's why you get the blank select.
您有一个空选项作为第一个选项。这就是为什么你得到空白选择。
回答by catcyborg
The issue is not reproducible if I start a fresh HTML page (on Mac Chrome and Safari). To me, this sound like a clashing CSS rules issue. Is color: #fff;style defined in one of the classes used by select? You might want to try inspecting the selector optionelement in Chrome/Safari to see if there are any classes applying that style.
如果我开始一个新的 HTML 页面（在 Mac Chrome 和 Safari 上），这个问题是不可重现的。对我来说，这听起来像是一个冲突的 CSS 规则问题。color: #fff;样式是否在 使用的类之一中定义select？您可能想尝试检查Chrome/Safari 中的select或option元素以查看是否有任何应用该样式的类。
回答by lmeurs
The padding is pushing the contents of the select out of view, try decreasing the padding in Chrome's web inspector to make it appear again.
填充将选择的内容从视图中推出，尝试减少 Chrome 网络检查器中的填充以使其再次出现。
A solution might be to hard set the padding AND height, ie.
一个解决方案可能是硬设置填充和高度，即。
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;
But bottom pixels from letters still tend to fall off in different browsers, a 53px height should be sufficient (2*border + 2*padding + 1*line-height), but Chrome 34 needs 55px, IE11 56px and FF28 57px to completely display letters.
但是字母底部的像素在不同的浏览器中仍然容易脱落，53px的高度应该足够了（2*border + 2*padding + 1*line-height），但是Chrome 34需要55px，IE11 56px和FF28 57px才能完全显示字母。
See my fiddle at http://jsfiddle.net/lmeurs/tLkAR/.
在http://jsfiddle.net/lmeurs/tLkAR/查看我的小提琴。
Also see Formalizeto "teach your forms some manners" and Selectfor "styleable select elements".
回答by Abdul Manaf Saparuddin
for me I have to set this:
对我来说，我必须设置这个：
padding-top: 0;
padding-bottom: 0;
