Styling a <select> on iOS

Question

I'm developing a web-app for both Android and iOS.

I have encountered a problem with the styling of the app.

For some reason, styles applied to a <select> won't display on MobileSafari (aka iOS WebView)

CSS:

p,
input,
select,
option,
button {
    font-family: Arial, ArialHebrew, sans-serif;
    font-size: x-large;
    text-align: center;
    color: #FFF;
    margin: 1vh;
    padding: 1vh;
}

input,
select,
option,
button {
    background-color: #333;
    border-radius: 1vh;
    border-color: transparent;
}

How i want it to look (Chrome, Android):

How it looks (MobileSafari, iOS):

What do i need to change in my CSS to apply the style to the <select>?

Answer 1

The quick & easy fix is to apply -webkit-appearance: none. However, you might quickly notice your element has lost the arrow to indicate it's a <select> element.

To address this, one workaround is to wrap your element with a div and mimic the arrow using CSS content.

Here's a Fiddle: http://jsfiddle.net/d6jhpo7v/

And the fiddle in iOS simulator: