Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does using `-webkit-appearance: none` on a select option in OSX make the text disappear?

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:

Without attribute

This is how it looks WITH the attribute:

With 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;
}
like image 667
marcamillion Avatar asked May 19 '13 05:05

marcamillion


2 Answers

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/

like image 62
Jonathan Avatar answered Sep 19 '22 08:09

Jonathan


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.

like image 31
Kerim Incedayi Avatar answered Sep 20 '22 08:09

Kerim Incedayi