iPhoneで表示するとselect要素が透明になったかのように埋もれる

お問い合わせフォームを作成中で、レイアウトCSSで整えて終わり、実機でチェックをしております。
しかし、PC上でGoogle ChromeやSafariで表示された場合には問題なかったselect要素が
iPhoneで表示すると、まるで透明度があるかのように薄く表示されてしまいます。
また、角を丸くしたくないのですが、デフォルトで丸くなってしまうのでしょうか？

-webkit-appearance: none;

を追記してみましたが、解決しません。
どなたか原因と解決方法はわかりますでしょうか？

以下に該当部分のHTMLとCSSを記載致します。

HTML

  <div class="bg_color_down">
    <section class="form">
    <div class="container">
       <form action="mail.php" method="POST">
　　　　<div class="table">
            <div class="form_contents">
              <select id="pattern" name="問い合わせ内容" size="1">
                <option disabled selected value="">▼お問い合わせ内容</option>
                <option value="サンプル1">サンプル1</option>
                <option value="サンプル2">サンプル2</option>
                <option value="サンプル3">サンプル3</option>
                </select>
            </div>
          </div>
          <div class="column2">
            <div class="form_title"><label for="time"><span>相談希望日時</span></label></div>
          <div class="form_contents form_date">
            <p>
            <select class="date" name="月" size="1">
              <option disabled selected value="">▼</option>
              <option value="１月">１月</option>
              <option value="２月">２月</option>
              <option value="３月">３月</option>
              <option value="４月">４月</option>
              <option value="５月">５月</option>
              <option value="６月">６月</option>
              <option value="７月">７月</option>
              <option value="８月">８月</option>
              <option value="９月">９月</option>
              <option value="１０月">１０月</option>
              <option value="１１月">１１月</option>
              <option value="１２月">１２月</option>
              </select>
              月
            </p>
            <p>
            <select class="date" name="日" size="1">
                <option disabled selected value="">▼</option>
                <option value="１日">１日</option>
                <option value="１５日">１５日</option>
                <option value="３０日">３０日</option>  
              </select>
              日
            </p>
            <p>
         </form>
       </div>
     </section>
   </div>

CSS

.bg_color_down {
  background-color: #8862A2;
  color: #fff;
}

.form {
  padding-left: 38px;
  padding-right: 33px;
}

.form_title {
  margin-bottom: 8px;
}
.form_contents {
  margin: 0 0 16px 0;
}

.form_date p {
  margin: 0;
}

.form_date {
  display: flex;
  justify-content: space-between;
}

select#pattern {
  width: 100%;
  height: 33px;
  line-height: 33px;
  padding-left: 0.8em;
  background-color: #fff;
  -webkit-appearance: none;
}

select.date {
  height: 33px;
  line-height: 33px;
  width: 51px;
  padding-left: 0.1em;
  background-color: #fff;
  -webkit-appearance: none;
}