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;
}
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/
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.
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