为什么在OSX中的选择选项上使用`-webkit-appearance：none`会使文本消失？ [英] Why does using `-webkit-appearance: none` on a select option in OSX make the text disappear?
问题描述
为了获得我想在OS X中的Chrome上的样式，我必须使用 -webkit-appearance：none; 属性。
问题是，现在当我选择一个答案，它不显示。
https://i.stack.imgur.com/zaUoP.pngalt =无属性>
这是它的属性：
对于它的价值，这是我创建这个选择菜单 - 简单形式：
％= f.input_field：country_id，collection：Piggybak :: Country.send（type），class：required％>
这是它生成的HTML：
< select class =select required required validid =piggybak_order_billing_address_attributes_country_idname =piggybak_order [billing_address_attributes] [country_id]>< option value => / option>
< option value =231selected =selected>美国< / option>< / select&
如何解决这个问题？
编辑1
这是 CSS ：
form.simple_form select {
padding：20px;
-webkit-appearance：none;
}
在Chrome for OSX 10.8.2），这个工作正常：
<！doctype html>
< html lang =en>
< head>
< meta charset =UTF-8/>
< title>测试选择< / title>
< style>
form.simple_form select {
padding：20px;
-webkit-appearance：none;
}
< / style>
< / head>
< body>
< form class =simple_form>
< select class =select required required validid =piggybak_order_billing_address_attributes_country_idname =piggybak_order [billing_address_attributes] [country_id]>
< option value => test< / option>
< option value =231selected =selected>美国< / option>
< / select>
< / form>
< / body>
< / html>
您有一个空选项作为第一个选项。这就是为什么你得到空白的选择。
In order to get the styling I want on Chrome in OS X, I have to use the -webkit-appearance: none; attribute.
See this question and 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:
<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
This is the CSS:
form.simple_form select {
padding: 20px;
-webkit-appearance: none;
}
Test in Chrome for OSX (10.8.2) and this works fine:
<!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.
这篇关于为什么在OSX中的选择选项上使用`-webkit-appearance：none`会使文本消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
