Style HTML select tag on ios/safari/iPhone

Question

I have three dropdown lists (three <select> elements). I styled them with the css:

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

In chrome they look perfectly fine. However when I test the site on my iPhone 6s (ios 10.2.1) on Safari the result is a bit different as shown in the image:

As you can see there's that gradient in background and near the arrow the background is black.

How can I style the <select> elements so I would have background white on ios either?

Answer 1

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].