Menu
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;
}
667
I had this problem and it turned out to be the height property causing it.
select {
padding: 20px;
height: 20px; /* suddenly invisible text! */
-webkit-appearance: none;
}
Check out this fiddle http://jsfiddle.net/bpYGv/2/
62
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
