Search code examples
ioscssselectbackgroundsafari

How To Change Select Box Background Without Losing the Right Arrow on Mobile Safari

I need to change the background on my select box to a flat color but I don't want the right arrow (aka the drop-down arrow) to go away.

I have tried:

select {
    -webkit-appearance: none;
    border: 0;
    background: none;
}

This works for all browsers except for Safari on my iPhone 4s with iOS 7. On this browser the right-arrow disappears and it is not clear to the user that it is a select box.

Omitting -webkit-appearance doesn't help.

I don't want to make a fake arrow. That will affect all the other browsers.

Any ideas?

Solution

  • You are not going to find a good cross-browser implementation for styling the select element via CSS. The better solution is to create your own dropdown via javascript and style those elements uniformly across all browsers.