为什么在OSX中的select选项上使用`-webkit-appearance:none`会使文本消失？
mar*_*ion 7 css ruby-on-rails css3 simple-form
为了在OS X中的Chrome上获得我想要的样式,我必须使用该-webkit-appearance: none;属性.
问题是,现在当我选择一个答案时,它没有显示出来.该领域仍然是空白.
这是没有该属性的外观:
这是它与属性的外观:
对于它的价值,这就是我创建这个选择菜单的方式 - 使用Simple Form:
<%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %>
这是它生成的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>
我该如何解决？
编辑1
这是CSS:
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
我有这个问题,结果是导致它的高度属性.
select {
padding: 20px;
height: 20px; /* suddenly invisible text! */
-webkit-appearance: none;
}
看看这个小提琴 http://jsfiddle.net/bpYGv/2/
- 您确定它是“height”属性，而不是“height”与“padding”混合的组合，无论如何都会超过“height”？ (2认同)
在 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>
您有一个空选项作为第一个选项。这就是为什么你得到空白选择。
| 归档时间： |
|
| 查看次数： |
27580 次 |
| 最近记录： |