4

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:

enter image description here

and

enter image description here

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

I have attached my code below:

HTML

<select id="pay-options" class="form-default">
    <option> Pay By Card </option>
    <option> Pay By Cash </option>
    <option> Account </option>
</select>

CSS

input.form-default{
    margin-bottom: 0px !important;
    -webkit-appearance: none;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ben L
  • 127
  • 1
  • 1
  • 13

1 Answers1

1

You can't control the direction that a select element opens. You can create your JavaScript solution using list items, and choose the height and position of your dropdown without depending on html select.

Edit-
It seems there is one!
You can check out this question for some attempts to a query quite similar to yours, and this fiddle.

Community
  • 1
  • 1
user2940296
  • 143
  • 15