为什么在OSX中使用‘-webkit-外观: in’选项会使文本消失？
为什么在OSX中使用‘-webkit-外观: in’选项会使文本消失？
提问于 2013-05-19 05:41:21
为了在OS的Chrome上获得我想要的样式，我必须使用-webkit-appearance: none;属性。
问题是，现在当我选择一个答案时，它不会出现。这个领域仍然是空白的。
没有该属性的情况是这样的：
属性如下所示：
至于它的价值，这就是我如何创建这个选择菜单-使用简单的形式：
<%= 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;
}回答 5
Stack Overflow用户
发布于 2013-09-15 18:50:29
我有这个问题，结果是导致它的高度属性。
select {
padding: 20px;
height: 20px; /* suddenly invisible text! */
-webkit-appearance: none;
}看看这把小提琴http://jsfiddle.net/bpYGv/2/
Stack Overflow用户
发布于 2013-05-22 14:34:05
OSX的Chrome测试(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>您有一个空选项作为第一个选项。这就是为什么你会得到空白的选择。
Stack Overflow用户
发布于 2013-05-28 08:03:15
如果我启动一个新的HTML页面(在Mac和Safari上)，这个问题是不可复制的。对我来说，这听起来像是一个冲突的CSS规则问题。color: #fff;样式是在select使用的类中定义的吗？您可能需要尝试检查Chrome/Safari中的select或option元素，看看是否有应用这种样式的类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16631801
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号