HTML Dropdown appears different on OSX

Question

I have an HTML form with inputs and dropdowns. All have been styled using CSS. But for strange reason the dropdown is not responding to the CSS style that I set. If you look at the screenshot, you will see that the input fields appear correctly, but the dropdown seems to be using some OSX default look and feel which looks way off. The weird thing is that it appears correctly when I tested it on a windows Machine. Is there something I should be adding to make this appear correctly on OSX?

Can you please create a [jsfiddle](http://jsfiddle.net/) or similar? — Marko Gresak, Aug 10 '15 at 23:55
Is this similar to what you need http://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome — Jared, Aug 10 '15 at 23:58
@MarkoGrešak here is the jsfiddle, same behaviour https://jsfiddle.net/mxdnw89w/ — Lavvo, Aug 11 '15 at 00:09
@Jared not that's not it. This is not a Safari issue, does that in Firefox and Chrome, it seems to be an OSX thing. — Lavvo, Aug 11 '15 at 00:10

score 1 · Accepted Answer · answered Aug 11 '15 at 00:19

1

Thanks for the fiddle, I managed to reproduce your problem and also managed to find a fix.

I had to add rule appearance: none; to the select tag.

.form-field {
  padding-bottom: 20px;
}

.form-label {
  color: #6E6E6E;
  padding-bottom: 4px;
  font-size: 16px;
}

.input1 {
  width: 90%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #3E3E3E;
}

select {
  -webkit-appearance: none;  /* for webkit (safari, chrome) compatibility */
  -moz-appearance: none; /* for firefox compatibility */
  appearance: none;
}

<div class="form-field">
  <div class="form-label">
<span>State *</span>
  </div>
  <div class="form-input">
<select id="state" class="input1">
  <option value="FL" selected="selected">Florida</option>
</select>
  </div>
</div>

answered Aug 11 '15 at 00:19

Marko Gresak

7,950
5
40
46

Dude, thx so much!! Almost there, one more thing is still broken in the fix, i noticed the dropdown arrow is not showing anymore?? – Lavvo Aug 11 '15 at 00:35
and also, the edges are curved..? – Lavvo Aug 11 '15 at 00:38
Huh, yeah I haven't been paying attention and I though the curved edges were expected. I'm sorry to say, but I'm out of ideas. I always used [bootstrap](http://getbootstrap.com/) (or similar, e.g. [foundation](http://foundation.zurb.com/), [semantic UI](http://semantic-ui.com/), [material design](http://www.getmdl.io/) etc.) and didn't even have to bother with cross-platform mess. – Marko Gresak Aug 11 '15 at 00:45
I was playing around and doing this at least fixes the rounded corners select { -webkit-appearance: textfield; /* for webkit (safari, chrome) compatibility */ -moz-appearance: textfield; /* for firefox compatibility */ appearance: textfield; } – Lavvo Aug 11 '15 at 00:57
Even though it's not the full solution, I'll accept t he answer since at least you allowed me to get over the first big hump which was the variance. Now that it looks like it belongs into the form, I'll see what I can do about the arrow. – Lavvo Aug 11 '15 at 01:28
Thanks! I wish you luck at finishing off the problem. Maybe this link from [CSS-tricks](https://css-tricks.com/almanac/properties/a/appearance/) will help. – Marko Gresak Aug 11 '15 at 01:32

score 0 · Answer 2 · answered Aug 10 '15 at 23:55

0

Try using a CSS reset.

There are several ones out there. If you're using HTML5 you probably want Normalize.css: https://necolas.github.io/normalize.css/

If you're using traditional HTML, then the Meyer Reset 2.0 should do: http://meyerweb.com/eric/tools/css/reset/

Go to the links above and download the file. Link the file before your own styles.

answered Aug 10 '15 at 23:55

Aniruddh Agarwal

257
3
9

Tried this. Doesn't seem to be a reset issue. – Lavvo Aug 11 '15 at 00:12

HTML Dropdown appears different on OSX

2 Answers2