HTML Inputs are not shown properly only on Iphone

问题

I have multiple inputs fields in my website, which are shown properly in computer browsers and in Android mobiles. But when I using my Iphone to access these inputs, they are shown way different from the original css built for these.

This is the HTML CODE:

<div class="panelManageSearchOptions">
    <input id="panelManageSearchDiscussionsByDiscussiontitle" class="panelManageSearchInput" type="text" placeholder="חפש דיון לפי כותרת ">
    <input id="panelManageSearchDiscussionsByUsername" class="panelManageSearchInput" type="text" placeholder="חפש דיון לפי שם משתמש ">
</div>

This is the CSS code:

  .panelSection .panelManageSearchOptions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
    -webkit-box-shadow: 0 2px 5px black;
            box-shadow: 0 2px 5px black;
    padding: 5px 8px; }
  .panelSection .panelManageSearchInput {
    border: 1px solid black;
    width: 100%;
    font-size: 14px;
    padding: 3px 6px;
    -webkit-box-shadow: 0 2px 2px #7F8084;
            box-shadow: 0 2px 2px #7F8084; }

This is how these inputs are shown in computer \ android mobiles browsers:

And this is on Safari \ Chrome in my Iphone XR:

来源：https://stackoverflow.com/questions/61078076/html-inputs-are-not-shown-properly-only-on-iphone