このブログで起きたコメントを投稿するボタンをcssでデザインした際になぜかIOS端末だけデザインがおかしかった現象の解決方法をメモ。
ちなみに、この現象はGoogle ChromeやSafariブラウザのPC端末では起きず、また同様のブラウザからDeviceを切り替えた時にも起きなかった。 (つまり、IOS端末(iPhone、iPad)の時だけ現象が起きた)
目次
対象箇所のスタイル
HTML
1 2 3 4 5 |
<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> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
.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
1 2 3 4 5 |
<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> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; ←これを追加 } |
これで解決できた。
LEAVE A REPLY