IOSのスマートデバイス(iPhone, iPad)のフォームだけデザインが崩れる時の対処方法

このブログで起きたコメントを投稿するボタンをcssでデザインした際になぜかIOS端末だけデザインがおかしかった現象の解決方法をメモ。

ちなみに、この現象はGoogle ChromeやSafariブラウザのPC端末では起きず、また同様のブラウザからDeviceを切り替えた時にも起きなかった。 (つまり、IOS端末(iPhone、iPad)の時だけ現象が起きた)

対象箇所のスタイル

HTML

<p class="form-submit">
<input name="submit" type="submit" id="submit" value="Post Comment">
<input type="hidden" name="comment_post_ID" value="****" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>

</p>

CSS

.gdlr-button, input[type="button"], input[type="submit"] {
display: inline-block;
font-size: 11px;
padding: 15px 30px;
margin-bottom: 15px;
margin-right: 5px;
outline: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
}

.gdlr-button, input[type="button"], input[type="submit"] {

display: inline-block;

font-size: 11px;

padding: 15px 30px;

margin-bottom: 15px;

margin-right: 5px;

outline: none;

cursor: pointer;

text-transform: uppercase;

letter-spacing: 2px;

border: none;

}

変更後のスタイル

「-webkit-appearance: none;」をCSSに追加

HTML

<p class="form-submit">
<input name="submit" type="submit" id="submit" value="Post Comment">
<input type="hidden" name="comment_post_ID" value="****" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>

</p>

CSS

.gdlr-button, input[type="button"], input[type="submit"] {
display: inline-block;
font-size: 11px;
padding: 15px 30px;
margin-bottom: 15px;
margin-right: 5px;
outline: none;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
-webkit-appearance: none;　←これを追加
}