お問い合わせフォームを作成中で、レイアウト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="1月">1月</option> <option value="2月">2月</option> <option value="3月">3月</option> <option value="4月">4月</option> <option value="5月">5月</option> <option value="6月">6月</option> <option value="7月">7月</option> <option value="8月">8月</option> <option value="9月">9月</option> <option value="10月">10月</option> <option value="11月">11月</option> <option value="12月">12月</option> </select> 月 </p> <p> <select class="date" name="日" size="1"> <option disabled selected value="">▼</option> <option value="1日">1日</option> <option value="15日">15日</option> <option value="30日">30日</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; }
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。