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

Question

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

Either Chrome on Linux works differently, or you have not provided all the CSS that gets applied. — Mr Lister, May 19 '13 at 07:03
Maybe you can try specifying the colors explicitly (both on the `select` and tyhe `option`), as well as the opacity and anything that can hide the text. Otherwise, I can't help you, as I don't have a Mac to test on. — Mr Lister, May 19 '13 at 08:24
For a huge project with lot of forms, I chose to use [forms.css from isellsoap](http://isellsoap.github.io/forms.css/). Everything you need for consistent crossbrowser design is there. Even without using it, you can learn a lot from the choices they made. — FelipeAls, May 19 '13 at 08:54
Thanks for the tip @FelipeAls. That seems like overkill in this case. I just want a simple CSS rule that will work for Chrome on OS X. — marcamillion, May 19 '13 at 09:42
I've one "problem" (it's rather a consequence of `-webkit-appearance: none` and it's mandatory if you want to style form elements with the least JS possible) on Chrome/Vista: the lack of right arrow. Previously linked library deal with this and many other problems on Chrome mainlybut also Firefox, Opera, IE, etc It seems you're encountering this problem on OS X too but also the lack of option or the latter being written in white on white. I could test this one tomorrow at work if you have a fiddle (not sure if it's Chrome or another part of your CSS...) — FelipeAls, May 19 '13 at 15:25
The lack of right arrow doesn't bother me right now. As it stands right now, I can't read the drop down. Just being able to read it - with it being the same height as my other elements, would be a major boost. — marcamillion, May 19 '13 at 23:11
I take it you've tried other values for `-webkit-appearance`, to see how they come out? — Mr Lister, May 20 '13 at 09:17
@marcamillion do you have an example where we can see this in action (link to your website?) — Explosion Pills, May 22 '13 at 16:29
Fiddle: http://jsfiddle.net/bpYGv/1/. Do you see the problem there? Looks fine for me. — Simon Perepelitsa, May 28 '13 at 08:12

score 9 · Answer 1 · answered Sep 15 '13 at 18:50

9

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/

answered Sep 15 '13 at 18:50

Jonathan

2,968
3
24
36

2

Are you sure its the `height` property, and not the combination of a `height` mixed with a `padding` which would exceed the `height` anyway? – Lachlan McDonald Feb 20 '14 at 23:54
Keep falling into the same trap with this one using Bootstrap. This is the correct answer, @nness and no padding doesn't contribute to the issue. Setting `.form-control` to `height: auto` or `height: auto !important` will show it properly again with what ever padding it comes with. – adamj Nov 11 '14 at 05:46

score 5 · Answer 2 · edited May 30 '14 at 13:26

5

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.

edited May 30 '14 at 13:26

Oleg

9,341
2
43
58

answered May 22 '13 at 14:34

Kerim Incedayi

645
6
11

1

No the issue is not that I have an empty option. The issue is that once I select a valid option - in the question I chose `United States` - but it still shows as blank once `United States` is selected. So that big white/blank box is AFTER I have selected `United States`. – marcamillion May 24 '13 at 21:45
I cannot reproduce this on OSX. – Kerim Incedayi May 25 '13 at 17:42

score 2 · Answer 3 · answered May 28 '13 at 08:03

The issue is not reproducible if I start a fresh HTML page (on Mac Chrome and Safari). To me, this sound like a clashing CSS rules issue. Is color: #fff; style defined in one of the classes used by select? You might want to try inspecting the select or option element in Chrome/Safari to see if there are any classes applying that style.

score 0 · Answer 4 · answered Apr 24 '14 at 12:33

The padding is pushing the contents of the select out of view, try decreasing the padding in Chrome's web inspector to make it appear again.

A solution might be to hard set the padding AND height, ie.

-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #aaa;
padding: 20px;
font: 12px/12px Arial;
height: 57px;

But bottom pixels from letters still tend to fall off in different browsers, a 53px height should be sufficient (2*border + 2*padding + 1*line-height), but Chrome 34 needs 55px, IE11 56px and FF28 57px to completely display letters.

See my fiddle at http://jsfiddle.net/lmeurs/tLkAR/.

Also see Formalize to "teach your forms some manners" and Select for "styleable select elements".

score 0 · Answer 5 · answered Jul 21 '19 at 14:53

0

for me I have to set this:

padding-top: 0;
padding-bottom: 0;

answered Jul 21 '19 at 14:53

Abdul Manaf Saparuddin

319
4
5

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

5 Answers5

Linked