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

in order styling want on chrome in os x, have use -webkit-appearance: none; attribute.

see this question , this answer.

the issue is, when select answer, doesn't show up. field remains blank.

this how looks without attribute:

this how looks attribute:

for it's worth, how creating select menu - simple form:

<%= f.input_field :country_id, collection: piggybak::country.send(type), class: "required" %> 

this html 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 fix this?

edit 1

this css:

form.simple_form select {     padding: 20px;     -webkit-appearance: none; } 

i had problem , turned out height property causing it.

select {     padding: 20px;     height: 20px; /* invisible text! */     -webkit-appearance: none; } 

check out fiddle http://jsfiddle.net/bpygv/2/