Force input and select boxes to open downward (not upward) on ipad safari
<p>On my website is an input box where the user inputs date and time and a select box where the user selects how they wish to pay. In safari on iPad the selection boxes are opening like this:</p>

<p><a href="https://i.stack.imgur.com/Tc0WR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tc0WR.png" alt="enter image description here"></a></p>

<p>and</p>

<p><a href="https://i.stack.imgur.com/xbmrE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xbmrE.png" alt="enter image description here"></a></p>

<p>But I would like for the input / select box to open below instead of above.</p>

<p>I have attached my code below:</p>

<p>HTML</p>

<p></p>

<pre><code>&lt;select id="pay-options" class="form-default"&gt;
    &lt;option&gt; Pay By Card &lt;/option&gt;
    &lt;option&gt; Pay By Cash &lt;/option&gt;
    &lt;option&gt; Account &lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p></p>

<p></p>

<p>CSS</p>

<pre><code>input.form-default{
    margin-bottom: 0px !important;
    -webkit-appearance: none;
}
</code></pre>