CSS <select> dropdown not displaying background color in iOS/iPAD browsers

Issue

I have a dropdown box and styled it with CSS; background color is red and border is yellow. This displays fine in all PC browsers, but in iOS/iPAD browser the background remains grey (standard color I guess).

Here is my CSS:

select#json-one{
    width:15%;
    margin:10px 10px;
    padding:6px 6px;
    border:#FF0 1px solid;
    background-color:#7f3133;
    color:#FFF;
    font-size:16px;
    font-family:Georgia, "Times New Roman", Times, serif;
}

and here is my HTML:

<form action="" method="get" id="form1">
    <select id="json-one">
        <option selected value="norway">Norway</option>
        <option value="usa">USA</option>
        <option value="denmark">Denmark</option>
    </select>
</form>

Is there a way to fix this in the CSS code, or do I need to use JavaScript / JQuery? I cannot successfully find out how to style dropdowns using JavaScript, so help on this would be much appreciated.

To illustrate my problem, please see screenshots here: http://jazzkatt.net/testtwo/

Thank you.

Solution

something like this https://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/ hope this helps. i just tested its in my mac it's working fine to me. let me know if you need any more help

Answered By - Sastry Kasibotla