title: Why does using `-webkit-appearance: none` on a select option in OSX make the text disappear?
body: <p>In order to get the styling I want on Chrome in OS X, I have to use the <code>-webkit-appearance: none;</code> attribute.</p>
  
  <p>See <a href="https://stackoverflow.com/questions/16630931/how-do-i-apply-padding-within-a-select-dropdown-box/">this question</a> and <a href="https://stackoverflow.com/a/16630970/1153362">this answer</a>.</p>
  
  <p>The issue is, now when I select an answer, it doesn't show up. The field just remains blank.</p>
  
  <p>This is how it looks without that attribute:</p>
  
  <p><img src="https://i.stack.imgur.com/zaUoP.png" alt="Without attribute"></p>
  
  <p>This is how it looks WITH the attribute:</p>
  
  <p><img src="https://i.stack.imgur.com/S8Ykk.png" alt="With attribute"></p>
  
  <p>For what it's worth, this is how I am creating this select menu - with Simple Form:</p>
  
  <pre><code>&lt;%= f.input_field :country_id, collection: Piggybak::Country.send(type), class: "required" %&gt;
  </code></pre>
  
  <p>This is the HTML it generates:</p>
  
  <pre><code>&lt;select class="select required required valid" id="piggybak_order_billing_address_attributes_country_id" name="piggybak_order[billing_address_attributes][country_id]"&gt;&lt;option value=""&gt;&lt;/option&gt;
  &lt;option value="231" selected="selected"&gt;United States&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <p>How do I fix this?</p>
  
  <p><strong>Edit 1</strong></p>
  
  <p>This is the <code>CSS</code>:</p>
  
  <pre><code>form.simple_form select {
      padding: 20px;
      -webkit-appearance: none;
  }
  </code></pre>