HTML输入仅在Iphone上无法正确显示

Question

我的网站中有多个输入字段，这些字段在计算机浏览器和Android手机中正确显示。但是，当我使用Iphone访问这些输入时，它们的显示方式与为这些输入构建的原始CSS有所不同。

这是HTML代码：

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

这是CSS代码：

  .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; }

这是这些输入在计算机\ android手机浏览器中的显示方式：

这是在Iphone XR中的Safari \ Chrome上：